jquery简单的列表滚动效果

使用jquery实现一些列表的滚动有很多的方法，你可以使用animate方法，到网上搜到的大都是使用animate方法的，当然也可以使用别的方法，今天我们介绍的这个方法我感觉也比前一种方法更容易理解！思路就是首先获取到列表中的第一个，然后把它隐藏在隐藏的同时克隆一份放到列表容器中，这时候删除这个列表。而这个时候原来的第二条列表就变成第一条了，设置循环就可以一直执行下去。好了用语言描述有时候感觉很不给力，所以还是看例子！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>滚动新闻</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script type="text/javascript"> function newsScroll(){ $(function(){ $(".newsList li:first").hide('slow',function(){ $(this).clone().appendTo($(this).parent()).show('slow'); $(this).remove(); }); }); }; $(document).ready(function() { var myar = setInterval('newsScroll(".newsList li")', 2000) $(".newsList li").hover(function() { clearInterval(myar); }, function() { myar = setInterval('newsScroll(".newsList li")', 2000) }); }); </script> <style type="text/css"> #box { height:300px; width:300px; margin:0 auto; border:1px solid orange; line-height:2; } ul,li { list-style:none;} .notice { width:500px; margin:10px auto; line-height:1.6; font-size:18px; color:orange;} </style> </head> <body> <div class="notice"> 这中写法很容易理解，并且你可以自己修改切换到方式，比如你可以把show和hide换成fadeIn和fadeOut或者是slideDown和slideUp都可以，自己不会写插件所以就没有封装！ </div> <div id="box"> <ul class="newsList"> <li>web标准学习-www.xh-css.cn</li> <li>web标准学习-www.xh-css.cn</li> <li>web标准学习-www.xh-css.cn</li> <li>web标准学习-www.xh-css.cn</li> <li>web标准学习-www.xh-css.cn</li> <li>web标准学习-www.xh-css.cn</li> <li>web标准学习-www.xh-css.cn</li> <li>web标准学习-www.xh-css.cn</li> </ul> </div> </body> </html>

提示：你可以先修改部分代码再运行。

你还可以把show和hide换成fadeIn和fadeOut或者是slideDown和slideUp都可以，自己动手试试吧。

标签: jquery简单的列表滚动效果

发表于 jquery

0 comments 0 people listening

Comment help
Get Livefyre

Sort: Newest | Oldest

jquery简单的列表滚动效果

站内搜索

热门文章

页面

最新评论

好站推荐

工具

常逛

标签

存档

功能