jquery滚动元素
来源:互联网 发布:手持式网络测试仪 编辑:程序博客网 时间:2024/05/22 13:50
项目中有社区公告展示,要求是《=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技术交流群
0 0
- jquery滚动元素
- jquery控制页面元素跟随滚动
- ScrollMagic-jQuery元素滚动动画库
- jquery如何获取元素的滚动高度
- jQuery获取元素位置、滚动条高度
- jquery 点击元素后,滚动条滚动至该元素位置 - 笔记
- jquery中点击某元素后滚动条滚动到某元素位置或底部
- jQuery页面滚动图片等元素动态加载实现
- jQuery页面滚动图片等元素动态加载实现
- jQuery--页面图片等元素滚动动态加载技术
- jQuery页面滚动图片等元素动态加载实现
- jQuery页面滚动图片等元素动态加载实现
- jQuery页面滚动图片等元素动态加载实现
- jQuery实现页面滚动时元素的智能定位
- jQuery页面滚动图片等元素动态加载实现
- javascript && jquery 延时屏幕滚动元素fadeout效果,允许打断。
- jQuery页面滚动图片等元素动态加载实现
- js/jquery获取页面大小,滚动条位置,元素位置
- visual assist 几个常用的快捷键
- apache+nagios+pnp4nagios(Client 安装配置)
- ActionScript不断旋转的椭圆
- Struts 2中实现文件下载
- mysql修改表默认字符集可能带来的隐患
- jquery滚动元素
- strtr和str_replace效率探索
- VS2010 常用快捷键
- IOS开发 通过NSDateComponents和NSCalendar定义NSDate
- opencv CvSeq学习
- XFree86-4.6.0全编译
- Linux之静态库,动态库,动态加载库
- 移动应用设计中应避免的十种错误
- android browser 的几个小feature (五) Android Browser带网络认证的下载实现