jQuery 翻牌或百葉窗效果(內(nèi)容三秒自動切換)
更新時(shí)間：2012年06月14日 13:59:22 作者：
jQuery 翻牌或百葉窗效果(內(nèi)容三秒自動切換)，讓列表內(nèi)容不再枯燥
核心代碼：
$(function(){
var timer = true; //執(zhí)行向上或向下的開關(guān)
var liindex = 0; //LI的索引
var $div = $(".byc").find("div");
//每隔三秒執(zhí)行一次變換LI的內(nèi)容
var set1 = setInterval(function(){
ainbyc($div);
liindex = 0;
timer = !timer;
},3000);
//LI變換的方式，即每隔100ms，讓下一個(gè)LI移動top值;
function ainbyc(ds){
var set2 = setInterval(function(){
//所有的LI移動完畢，就清除
if(liindex == $div.length){
clearInterval(set2);
//向上
}else if(timer){
ds.eq(liindex).animate({"top":0},100);
//向下
}else{
ds.eq(liindex).animate({"top":-25},100);
}
liindex++;
},100);
}
})
妙味視頻里面都分析的很清楚了。這里只總結(jié)一下。
1.清除定時(shí)器clearInterval，先前我寫在了外面，應(yīng)該是寫在setInterval里面。
2.當(dāng)不確定布爾是什么值的時(shí)候，可以這樣寫：timer = !timer;
在線演示：http://demo.jb51.net/js/2012/mybyc/
打包下載：http://www.dhdzp.com/jiaoben/55611.html
復(fù)制代碼 代碼如下:
$(function(){
var timer = true; //執(zhí)行向上或向下的開關(guān)
var liindex = 0; //LI的索引
var $div = $(".byc").find("div");
//每隔三秒執(zhí)行一次變換LI的內(nèi)容
var set1 = setInterval(function(){
ainbyc($div);
liindex = 0;
timer = !timer;
},3000);
//LI變換的方式，即每隔100ms，讓下一個(gè)LI移動top值;
function ainbyc(ds){
var set2 = setInterval(function(){
//所有的LI移動完畢，就清除
if(liindex == $div.length){
clearInterval(set2);
//向上
}else if(timer){
ds.eq(liindex).animate({"top":0},100);
//向下
}else{
ds.eq(liindex).animate({"top":-25},100);
}
liindex++;
},100);
}
})
妙味視頻里面都分析的很清楚了。這里只總結(jié)一下。
1.清除定時(shí)器clearInterval，先前我寫在了外面，應(yīng)該是寫在setInterval里面。
2.當(dāng)不確定布爾是什么值的時(shí)候，可以這樣寫：timer = !timer;
在線演示：http://demo.jb51.net/js/2012/mybyc/
打包下載：http://www.dhdzp.com/jiaoben/55611.html
相關(guān)文章
JavaScript 學(xué)習(xí)筆記之一jQuery寫法圖片等比縮放以及預(yù)加載
以前對于JavaScript總是在用到的時(shí)候在頁面上寫幾個(gè)函數(shù)，基本沒考慮到函數(shù)的封裝與重用，最近有個(gè)項(xiàng)目可能對于這方面要求有點(diǎn)高，所以就研究了下類似jQuery的封裝2012-06-06
jQuery+PHP+Mysql實(shí)現(xiàn)抽獎程序
這篇文章主要為大家詳細(xì)介紹了jQuery+PHP+Mysql實(shí)現(xiàn)抽獎程序，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05
AJAX 是一種用于創(chuàng)建快速動態(tài)網(wǎng)頁的技術(shù)。這篇文章主要介紹了基于jQuery的ajax方法封裝的相關(guān)資料,需要的朋友可以參考下2016-07-07
六款幫助你實(shí)現(xiàn)驚艷視差滾動效果的jQuery插件
視差（Parallax）是指從不同的點(diǎn)看一個(gè)物體時(shí)形成的視覺差異，這個(gè)名詞是源自希臘文的παράλλαξις (parallaxis)，意思是改變2012-09-09
jquery.serialize() 函數(shù)語法及簡單實(shí)例
下面小編就為大家?guī)硪黄猨query.serialize() 函數(shù)語法及簡單實(shí)例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-07-07
jQuery實(shí)現(xiàn)頁面下拉100像素出現(xiàn)懸浮窗口的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)頁面下拉100像素出現(xiàn)懸浮窗口的方法,涉及jQuery事件監(jiān)聽及針對頁面元素的判定與動態(tài)操作技巧,需要的朋友可以參考下2016-09-09
jquery.pagination.js 無刷新分頁實(shí)現(xiàn)步驟分享
jquery.pagination.js 無刷新分頁實(shí)現(xiàn)步驟分享，需要的朋友可以參考下2012-05-05
老生常談jquery id選擇器和class選擇器的區(qū)別
下面小編就為大家?guī)硪黄仙Ｕ刯query id選擇器和class選擇器的區(qū)別。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-02-02
這篇文章主要介紹了jQuery div拖拽用法,以完整實(shí)例形式分析了jQuery結(jié)合UI插件實(shí)現(xiàn)拖拽功能的相關(guān)技巧,需要的朋友可以參考下2016-01-01
基于jquery的loading 加載提示效果實(shí)現(xiàn)代碼
有時(shí)候?yàn)榱烁玫挠脩趔w驗(yàn)，使用jquery的朋友可以參考下代碼。2011-09-09