jquery跑馬燈效果

要實(shí)現(xiàn)簡(jiǎn)單的跑馬燈效果其實(shí)運(yùn)用html中marquee/marquee標(biāo)簽就可以達(dá)到了

專(zhuān)注于為中小企業(yè)提供網(wǎng)站制作、成都做網(wǎng)站服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)當(dāng)雄免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動(dòng)了成百上千企業(yè)的穩(wěn)健成長(zhǎng)，幫助中小企業(yè)通過(guò)網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

基本屬性如下：

1.滾動(dòng)方向direction（包括4個(gè)值：up、 down、 left和 right）

2.滾動(dòng)方式behavior（scroll:循環(huán)滾動(dòng)，默認(rèn)效果； slide:只滾動(dòng)一次就停止； alternate:來(lái)回交替進(jìn)行滾動(dòng)）

3.滾動(dòng)速度scrollamount（滾動(dòng)速度是設(shè)置每次滾動(dòng)時(shí)移動(dòng)的長(zhǎng)度，以像素為單位）

4.滾動(dòng)延遲scrolldelay（設(shè)置滾動(dòng)的時(shí)間間隔，單位是毫秒）

5.滾動(dòng)循環(huán)loop（默認(rèn)值是-1，滾動(dòng)會(huì)不斷的循環(huán)下去）

6.滾動(dòng)范圍width、height

7.滾動(dòng)背景顏色bgcolor

8.空白空間hspace、vspace

如果想要更多的動(dòng)畫(huà)效果，更多選擇jquery.marquee.js這款插件——ul里的啥都能滾并自帶懸停效果

1.html 中寫(xiě)入ul id="marquee"li/li/ul

2.js中調(diào)入$("#marquee").marquee();即可

3.css比較簡(jiǎn)單，一般自己寫(xiě)，大致如下：

ul.marquee{display:block;line-height:1;position:relative;overflow:hidden;width:400px;height:22px;}

ul.marquee?li{ position:absolute;top:-999em;left:0; display:block; white-space:nowrap ;padding:3px5px;text-indent:0.8em;}

4.相關(guān)參數(shù)如下：

{

yScroll:"top"; ?//?初始滾動(dòng)方向?(還可以是"top"?或?"bottom")

showSpeed:850; ?//?初始下拉速度

scrollSpeed:12; ?//?滾動(dòng)速度

pauseSpeed:5000; ?//?滾動(dòng)完到下一條的間隔時(shí)間

pauseOnHover:true; ?//?鼠標(biāo)滑向文字時(shí)是否停止?jié)L動(dòng)

loop:-1; ?//?設(shè)置循環(huán)滾動(dòng)次數(shù)?（-1為無(wú)限循環(huán)）

fxEasingShow:"swing"; ?//?緩沖效果

fxEasingScroll:"linear"; ?//?緩沖效果

cssShowing:"marquee-showing"; ?//定義class event handlers

init:null; ?//?初始調(diào)用函數(shù)

beforeshow:null; ?//?滾動(dòng)前回調(diào)函數(shù)

show:null; ?//?當(dāng)新的滾動(dòng)內(nèi)容顯示時(shí)回調(diào)函數(shù)

aftershow:null; ?//?滾動(dòng)完了回調(diào)函數(shù)

}

jquery 如何實(shí)現(xiàn)回頂部 帶滑動(dòng)效果

返回頂部：設(shè)置為body的scrollTop為0

滑動(dòng)效果：animate（Jquery的自定義動(dòng)畫(huà)）

$("#returnTop").click(function?()?{

var?speed=200;//滑動(dòng)的速度

$('body,html').animate({?scrollTop:?0?},?speed);

return?false;

});

備注：returnTop為觸發(fā)返回頂部的元素ID

jquery怎么實(shí)現(xiàn)平滑滾動(dòng)效果 就是隨著滾動(dòng)條而滾動(dòng)

var?timer;??

$(function(){??

//滾動(dòng)條滾動(dòng)觸發(fā)

$(window).scroll(function(){??

clearInterval(timer);??

var?topScroll=getScroll();??

var?topDiv="100px";??

var?top=topScroll+parseInt(topDiv);??

timer=setInterval(function(){??

//動(dòng)畫(huà)移動(dòng)

$(".test").animate({"top":top},500);??

},500)??

})??

})??

function?getScroll(){??

var?bodyTop?=?0;????

if?(typeof?window.pageYOffset?!=?'undefined')?{????

bodyTop?=?window.pageYOffset;????

}?else?if?(typeof?document.compatMode?!=?'undefined'??document.compatMode?!=?'BackCompat')?{????

bodyTop?=?document.documentElement.scrollTop;????

}????

else?if?(typeof?document.body?!=?'undefined')?{????

bodyTop?=?document.body.scrollTop;????

}????

return?bodyTop??

}

JQuery 實(shí)現(xiàn)在同一頁(yè)面錨點(diǎn)鏈接之間的平滑滾動(dòng)

web開(kāi)發(fā)前端一直用JQuery

，真正接觸了才體會(huì)到，JQuery

原來(lái)比我想象的要強(qiáng)大的多，也可能比我體會(huì)到的還要強(qiáng)大的多，特別是兼容性那個(gè)好，于是把一些好玩的，酷炫的，可以代替

JS

的，統(tǒng)統(tǒng)給用上了。

從

JQuery

引入今天的正題，用

JQuery

實(shí)現(xiàn)錨點(diǎn)鏈接之間的平滑滾動(dòng)。以前介紹過(guò)一個(gè)用

JS

實(shí)現(xiàn)的頁(yè)面錨點(diǎn)跳轉(zhuǎn)緩沖特效，效果相當(dāng)不錯(cuò)，可以在同一頁(yè)面的錨點(diǎn)鏈接之間實(shí)現(xiàn)平滑的滾動(dòng)，但是

JS

代碼相對(duì)來(lái)說(shuō)比較冗長(zhǎng)，現(xiàn)在好了，只要已經(jīng)加載了

JQuery，我們就可以用較為簡(jiǎn)短的代碼實(shí)現(xiàn)相同的效果。

使用方法如下：

1、載入

JQuery

庫(kù)；

2、關(guān)鍵代碼：

$(document).ready(function()

{

$('a[href*=#]').click(function()

{

if

(location.pathname.replace(/^\//,

'')

==

this.pathname.replace(/^\//,

'')

location.hostname

==

this.hostname)

{

var

$target

=

$(this.hash);

$target

=

$target.length

$target

||

$('[name='

+

this.hash.slice(1)

+

']');

if

($target.length)

{

var

targetOffset

=

$target.offset().top;

$('html,body').animate({

scrollTop:

targetOffset

},

1000);

return

false;

}

}

});

});

還是再要強(qiáng)調(diào)一下加載的順序，先引用JQuery

類(lèi)庫(kù)。順便說(shuō)一下，經(jīng)測(cè)試，該滾動(dòng)效果在各瀏覽器下都兼容適用，唯有在

Opera

下表現(xiàn)有點(diǎn)怪異，還有待改進(jìn)。

jQuery實(shí)現(xiàn)帶滾動(dòng)導(dǎo)航效果的全屏滾動(dòng)相冊(cè)實(shí)例

本文實(shí)例講述了jQuery實(shí)現(xiàn)帶滾動(dòng)導(dǎo)航效果的全屏滾動(dòng)相冊(cè)。分享給大家供大家參考。具體如下：

運(yùn)行效果圖如下：

主要代碼如下：

$(function()

{

//加載時(shí)的圖片

var

$loader=

$('#st_loading');

//獲取的ul元素

var

$list=

$('#st_nav');

//當(dāng)前顯示的圖片

var

$currImage

=

$('#st_main').children('img:first');

//加載當(dāng)前的圖片

//同時(shí)顯示導(dǎo)航的項(xiàng)

$('img').load(function(){

$loader.hide();

$currImage.fadeIn(3000);

//滑出導(dǎo)航

setTimeout(function(){

$list.animate({'left':'0px'},500);

},

1000);

}).attr('src',$currImage.attr('src'));

//計(jì)算出將被顯示的略縮圖所在的div元素的寬度

buildThumbs();

function

buildThumbs(){

$list.children('li.album').each(function(){

var

$elem

=

$(this);

var

$thumbs_wrapper

=

$elem.find('.st_thumbs_wrapper');

var

$thumbs

=

$thumbs_wrapper.children(':first');

//每張略縮圖占有180像素的寬度和3像素的間距(margin)

var

finalW

=

$thumbs.find('img').length

*

183;

$thumbs.css('width',finalW

+

'px');

//是這元素具有滾動(dòng)性

makeScrollable($thumbs_wrapper,$thumbs);

});

}

//點(diǎn)擊菜單項(xiàng)目的時(shí)候（向上向下箭頭切換）

//使略縮圖的div層顯示和隱藏當(dāng)前的

//打開(kāi)菜單（如果有的話）

$list.find('.st_arrow_down').live('click',function(){

var

$this

=

$(this);

hideThumbs();

$this.addClass('st_arrow_up').removeClass('st_arrow_down');

var

$elem

=

$this.closest('li');

$elem.addClass('current').animate({'height':'170px'},200);

var

$thumbs_wrapper

=

$this.parent().next();

$thumbs_wrapper.show(200);

});

$list.find('.st_arrow_up').live('click',function(){

var

$this

=

$(this);

$this.addClass('st_arrow_down').removeClass('st_arrow_up');

hideThumbs();

});

//點(diǎn)擊略縮圖，改變大的圖片

$list.find('.st_thumbs

img').bind('click',function(){

var

$this

=

$(this);

$loader.show();

$('img

class="st_preview"/').load(function(){

var

$this

=

$(this);

var

$currImage

=

$('#st_main').children('img:first');

$this.insertBefore($currImage);

$loader.hide();

$currImage.fadeOut(2000,function(){

$(this).remove();

});

}).attr('src',$this.attr('alt'));

}).bind('mouseenter',function(){

$(this).stop().animate({'opacity':'1'});

}).bind('mouseleave',function(){

$(this).stop().animate({'opacity':'0.7'});

});

//隱藏當(dāng)前已經(jīng)打開(kāi)了的菜單的函數(shù)

function

hideThumbs(){

$list.find('li.current')

.animate({'height':'50px'},400,function(){

$(this).removeClass('current');

})

.find('.st_thumbs_wrapper')

.hide(200)

.andSelf()

.find('.st_link

span')

.addClass('st_arrow_down')

.removeClass('st_arrow_up');

}

//是當(dāng)前的略縮圖div層滾動(dòng)

//當(dāng)鼠標(biāo)移至菜單層的時(shí)候會(huì)自動(dòng)地進(jìn)行滾動(dòng)

function

makeScrollable($outer,

$inner){

var

extra

=

800;

//獲取菜單的寬度

var

divWidth

=

$outer.width();

//移除滾動(dòng)條

$outer.css({

overflow:

'hidden'

});

//查找容器上的最后一張圖片

var

lastElem

=

$inner.find('img:last');

$outer.scrollLeft(0);

//當(dāng)用戶鼠標(biāo)離開(kāi)菜單的時(shí)候

$outer.unbind('mousemove').bind('mousemove',function(e){

var

containerWidth

=

lastElem[0].offsetLeft

+

lastElem.outerWidth()

+

2*extra;

var

left

=

(e.pageX

-

$outer.offset().left)

*

(containerWidth-divWidth)

/

divWidth

-

extra;

$outer.scrollLeft(left);

});

}

});

希望本文所述對(duì)大家的jQuery程序設(shè)計(jì)有所幫助。