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