你的位置:首页 > Java教程

[Java教程]jquery实现内容滚动


HTML代码:

      <div class="scollNews">       <ul>        <li><a href="#">1</a></li>        <li><a href="#">2</a></li>        <li><a href="#">3</a></li>        <li><a href="#">4</a></li>        <li><a href="#">5</a></li>        <li><a href="#">6</a></li>        <li><a href="#">7</a></li>        <li><a href="#">8</a></li>        <li><a href="#">9</a></li>        <li><a href="#">10</a></li>       </ul>      </div>

jquery代码:

$(function(){  var settime;  $(".scollNews").hover(function(){    clearInterval(settime);  },function(){    settime=setInterval(function(){      var $first=$(".scollNews ul:first");   //获取类名下的第一个ul      var height=$first.find("li:first").height();   //获取第一个li的高      $first.animate({"marginTop":-height+"px"},100,function(){        $first.css({marginTop:0}).find("li:first").appendTo($first);   //设置上边距为零,为了下一次移动做准备      });    },1000);  }).trigger("mouseleave");  //自动触发元素的制定事件类型})

 

注:只要修改动画时间就可以控制滚动的速度。