当前位置：首页 → 问答吧 → 单条滚动新闻如何实现啊？？？

单条滚动新闻如何实现啊？？？

时间：2010-10-18

来源：互联网

单条向上滚动新闻带停留的，怎么实现啊？哪位好心人给提个醒啊？先谢了

作者: huayidishou 发布时间: 2010-10-18

看看这个能不能帮到你

<!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>
提示：您可以先修改部分代码再运行

作者: wyysf 发布时间: 2010-10-19

单条滚动新闻如何实现啊？？？

热门阅读

热门下载