jquery滚动元素
浏览数：17 /
时间：2015年06月09日
项目中有社区公告展示，要求是《=4条时直接显示，超过4条后需要循环滚动来显示，因为显示区域有限，只能一次显示4条。废话不多说，先上效果图。
为了解决这个问题，又重新翻看jquery,以前看过的差不多都忘光了，光用别人的写好的插件了，还没有真正的自己去实现 过。
没有去深入研究别人的实现原理，全凭自己想法来做了。
我的想法是，循环显示么，肯定是第一条显示过就添加到最后一条后面，重复这个动作就可以实现了。下面上代码。
<script type="text/javascript">
//滚动社区公告
var liLength = $(".thisGG_V div ul li").length;
//滚动li
function scrollLi() {
$(".thisGG_V div ul li").eq(liLength - 1).after("<li>" + $(".thisGG_V div ul li").eq(0).html() + "</li>");
$(".thisGG_V div ul li").eq(0).fadeOut("1000"); //一秒钟消失
setTimeout("removeli()", 1000); //一秒后移除
}
var interval; //定时器
//滚动公告
function scrollGG() {
if (liLength > 4) {//如果公告条数超过4条，就2秒钟开始滚动 一下。
interval = setInterval(scrollLi, "2000");
}
}
//鼠标移上移出效果
$(".thisGG_V div ul").hover(function () {//鼠标移上，停止滚动
clearInterval(interval);
}, function () {//鼠标移出，开始滚动
scrollGG();
});
//移除第一个li
function removeli() {
$(".thisGG_V div ul li").eq(0).remove();
}
scrollGG();
</script>页面加载完后开始执行scrollGG()方法就可以了。先是判断容器中的li是否超过4 ，如果超过，开始用定时器执行scrollLi方法，每2秒中执行一次。scrollLi方法中会将当前第一条li的html复制下来，添加到最后一条li的后面，然后让第一条Li以1秒钟的速度淡出，再延时一秒后开始执行removeli方法，此方法就是把第一条li移除。然后就是整个过程开始循环了，就达到了循环滚动效果。
还为ul添加上鼠标事件，当鼠标移上时，停止定时器，当鼠标移出时，继续执行循环。
代码中还有很多地方需要改进，虚心接受大家的拍砖。
欢迎加入.net技术交流群
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
