码迷,mamicode.com
首页 > Web开发 > 详细

jquery文字纵向滚动效果(带间隔停留)

时间:2014-10-22 10:49:44      阅读:131      评论:0      收藏:0      [点我收藏+]

标签:style   blog   color   io   ar   java   sp   div   on   

<script type="text/javascript">
//文字纵向滚动
$(function() { 
    var $this = $("#quotation"); 
    var scrollTimer;
    
    $this.hover(function() { 
        clearInterval(scrollTimer); 
        }, function() { 
        scrollTimer = setInterval(function() { 
        scrollNews($this); 
        },3000); 
    }).trigger("mouseleave"); 
    
    function scrollNews(obj) { 
        var $self = obj.find("ul"); 
        var lineHeight = $self.find("li:first").height(); 
        $self.animate({ 
        "marginTop": -lineHeight + "px" 
        },500, function() { 
        $self.css({ 
        marginTop: 0 
        }).find("li:first").appendTo($self); 
        }) 
    } 
}) 

</script>

以下是HTML代码

<!--滚动文字开始-->
                <div id="quotation" style="height:17px; line-height:17px; overflow:hidden; margin-top:15px;  ">
                    <ul style="margin:0;padding:0; list-style:none">
                        <li style="display: list-item;">1111111111</li>
                       <li style="display: list-item;">2222222</li>
                        <li style="display: list-item;">3333333333333</li>
                    </ul>
                </div>
                <!--滚动文字结束-->

 

jquery文字纵向滚动效果(带间隔停留)

标签:style   blog   color   io   ar   java   sp   div   on   

原文地址:http://www.cnblogs.com/kingfly/p/4042442.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!