【JAVASCRIPT】jquery实现新闻滚动效果

前台框架如下：

 1             <h3>最新新闻</h3>
 2             <div class="scrollNews" >
 3                 <ul>
 4                     <li><a href="#" class="tooltip" title="甜美宽松毛衣今秋一定红.">甜美宽松毛衣今秋一定红.</a></li>
 5                     <li><a href="#" class="tooltip" title="秋装百搭小马甲不到50元.">秋装百搭小马甲不到50元.</a></li>
 6                     <li><a href="#" class="tooltip" title="修身韩版小西装万人疯抢.">修身韩版小西装万人疯抢.</a></li>
 7                     <li><a href="#" class="tooltip" title="夏末雪纺店主含泪大甩卖.">夏末雪纺店主含泪大甩卖.</a></li>
 8                     <li><a href="#" class="tooltip" title="瑞丽都疯狂推荐的秋装.">瑞丽都疯狂推荐的秋装.</a></li>
 9                     <li><a href="#" class="tooltip" title="48元长款针织小开衫卖疯啦.">48元长款针织小开衫卖疯啦.</a></li>
10                     <li><a href="#" class="tooltip" title="长袖雪纺衫单穿内搭都超美.">长袖雪纺衫单穿内搭都超美.</a></li>
11                 </ul>
12             </div>

CSS定义如下：

1         <style type="text/css">
2             *{ margin:0; padding:0;}        
3             .scrollNews{width:256px;height:85px;overflow:hidden;background:#FFFFFF;border: 1px solid #AAAAAA;}
4             .scrollNews ul{padding:10px 0 5px 15px;}
5             .scrollNews ul li{ height:20px;list-style-type:none; font-size:small;}
6             a{text-decoration:none;}
7         </style>

这里需要注意的是*{ margin:0; padding:0;} 的使用。margin：设置外边距。padding：设置内边距。如果不使用此属性，在后面写JS代码时会破坏页面，因为div中有默认的内外边距；

JAVASCRIPT代码如下：

 1     <script type="text/javascript">
 2         $(function () {
 3             var settime;
 4             $(".scrollNews").hover(function () {
 5                 clearInterval(settime);
 6             }, function () {
 7                 settime = setInterval(function () {
 8                     var $first = $(".scrollNews ul:first");     //选取div下的第一个ul 而不是li；
 9                     var height = $first.find("li:first").height();      //获取第一个li的高度，为ul向上移动做准备；
10                     $first.animate({ "marginTop": -height + "px" }, 600, function () {
11                         $first.css({ marginTop: 0 }).find("li:first").appendTo($first); //设置上边距为零，为了下一次移动做准备
12                     });
13                 }, 3000);
14             }).trigger("mouseleave");       //trigger()方法的作用是触发被选元素的制定事件类型
15         });
16     </script>

在写JS代码之前不要忘记引入jquery-1.4.2.js；