首页 > Web开发 > 详细

jquery实现内容滚动

时间:2016-08-27 09:48:35      阅读:153      评论:0      收藏:0      [点我收藏+]

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");    //自动触发元素的制定事件类型
})

 

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

jquery实现内容滚动

原文:http://www.cnblogs.com/zhiling/p/5812288.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!