基于jQuery实现的单行公告活动轮播效果
更新时间:2017年08月23日 14:49:07 作者:MoleKing
本文通过实例代码给大家介绍了基于jQuery实现的单行公告活动轮播效果,非常不错,代码简单易懂,具有参考借鉴价值,需要的的朋友参考下吧
废话不多说了,直接给大家贴代码了,具体代码如下所示:
<div class="lunbo123" style="position:relative;height: 45px;overflow: hidden;background-color:white" ;> <ul id="myul" style="margin:6px;padding:0px;position:absolute;width: 700px; height: auto;"> <li> <a href="" style=" rel="external nofollow" rel="external nofollow" text-decoration: none;color: #000000; "> <span style="height:36px ; line-height: 36px;">公告test1 </span> </a> </br> </li> <li> <a href="" style=" rel="external nofollow" rel="external nofollow" text-decoration: none;color: #000000; "> <span style="height:36px ; line-height: 36px;">活动test2 </span> </a> </br> </li> </ul> </div> <script src="//cdn.bootcss.com/jquery/2.2.2/jquery.js"></script> <script> function lunbo123(id, height) { var ul = $(id); var liFirst = ul.find('li:first'); $(id).animate({ top: height }).animate({ "top": 0 }, 0, function() { var clone = liFirst.clone(); $(id).append(clone); liFirst.remove(); }) } setInterval("lunbo123('#myul','-45px')", 2500) </script> <style> #myul { list-style-type: none; width: 300px; height: 45px; font-size: 20px; } </style>
总结
以上所述是小编给大家介绍的基于jQuery实现的单行公告活动轮播效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
相关文章
jQuery v3.3.1的BUG以及解决办法(附解决方案)
这篇文章描述了我们 FineUIPro 产品 更新中遇到的一个问题,最终将问题定位到 jQuery.position() 函数,虽然jQuery的做法是依照HTML规范来的,但是 jQuery.offsetParent() 和 jQuery.position() 两个函数有冲突,并且会导致之前的jQuery插件出错,应该算是一个BUG吧2023-03-03jQuery在线选座位插件seat-charts特效代码分享
这篇文章主要介绍了jQuery在线选座位插件seat-charts特效,推荐给大家,有需要的小伙伴可以参考下。2015-08-08Ajax分页插件Pagination从前台jQuery到后端java总结
这篇文章主要从前台jQuery到后java端总结了Ajax分页插件Pagination的使用方法和技巧,感兴趣的小伙伴们可以参考一下2016-07-07
最新评论