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>