jQuery 仿alipay旧事滚动切换殊效,来自领取宝网站的殊效,竖向的旧事成果,带淡入淡出性能,工夫距离可调,由于写的时分更重视性能的展示 ,因而不怎样丑化,显患上有些毛糙。
外围代码:
<script type="text/javascript">
var t = n = count = 0;
function goScroll(id){
var t = n = 0, count = $(id + " .scroll_list li").size();
if(count>0){
$(id + " .scroll_list li").eq(0).show();
createScroll_switch(id,count);
$(id + " .scroll_switch li").eq(0).addClass("hover");
}
$(id + " .scroll_switch li").click(function(){
var i = $(id + " .scroll_switch li").index(this);
n = i;
if (i >= count + 1) return;
$(this).addClass("hover").siblings().removeClass("hover");
$(id + " .scroll_list li").eq(i).fadeIn(500).siblings().hide();
});
t = setInterval(function(){showAuto(id,count,n)}, 1000);
$(id).hover(
function(){clearInterval(t)},
function(){t = setInterval(function(){showAuto(id,count,n)}, 1000);}
);
}
function showAuto(id,count,n){
n = n >= (count - 1) ? 0 : ++n;
$(id + " .scroll_switch li").eq(n).trigger('click');
}
function createScroll_switch(id,count){
for (i=1;i<=count;i++){
$(id + " .scroll_switch").append("<li></li>");
}
}
</script>
外围代码:
<script type="text/javascript">
var t = n = count = 0;
function goScroll(id){
var t = n = 0, count = $(id + " .scroll_list li").size();
if(count>0){
$(id + " .scroll_list li").eq(0).show();
createScroll_switch(id,count);
$(id + " .scroll_switch li").eq(0).addClass("hover");
}
$(id + " .scroll_switch li").click(function(){
var i = $(id + " .scroll_switch li").index(this);
n = i;
if (i >= count + 1) return;
$(this).addClass("hover").siblings().removeClass("hover");
$(id + " .scroll_list li").eq(i).fadeIn(500).siblings().hide();
});
t = setInterval(function(){showAuto(id,count,n)}, 1000);
$(id).hover(
function(){clearInterval(t)},
function(){t = setInterval(function(){showAuto(id,count,n)}, 1000);}
);
}
function showAuto(id,count,n){
n = n >= (count - 1) ? 0 : ++n;
$(id + " .scroll_switch li").eq(n).trigger('click');
}
function createScroll_switch(id,count){
for (i=1;i<=count;i++){
$(id + " .scroll_switch").append("<li></li>");
}
}
</script>
标签: jquery垂直时
版权声明:除非特别标注,否则均为本站原创文章,转载时请以链接形式注明文章出处。