jQuery實現超鏈接逐條向上翻動效果,鏈接可隨機展示(設置isRand爲true),也可按照順序展示(設置isRand爲false);同類特效的jQuery插件爲innerfade;
JS代碼:
var isRand = false,isExist = true,array=[];
var ind = 0,childTotal = 0;
$(function(){childTotal = $("div.marquee a").length;});
setInterval(function(){
if(childTotal > 0){
if(isRand){
ind=parseInt(Math.random()*childTotal);
while(isExist){
isExist = false;
for(var j=0;j<array.length;j++){
if(array[j]==ind) {isExist=true;break;}
}
if(!isExist){array[array.length]=ind;}
else{ind=parseInt(Math.random()*childTotal);}
};
isExist = true;
if(array.length == childTotal){array = [];}//如果數組長度等於顯示元素個數,則清空數組
}
else{
if(ind + 1 == childTotal){ind = 0;}
else{ind++;}
}
$("div.marquee").animate({marginTop:(-ind*20)},1000);
}
},4000);
CSS樣式:
.content{float:left;width:390px;height:20px;padding:8px 0px 0px;font-size:12px;color:#666666; overflow:hidden;}
.marquee{ height:20px;}
.marquee a{ display:block; height:20px;}
HTML代碼:
<div class="content">
<div class="marquee">
<a href="/1.html">測試內容1</a>
<a href="/2.html">測試內容2</a>
<a href="/3.html">測試內容3</a>
<a href="/4.html">測試內容4</a>
</div>
</div>