zoukankan      html  css  js  c++  java
  • jquery文字纵向滚动效果(带间隔停留)

    <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>
                    <!--滚动文字结束-->
  • 相关阅读:
    2020-3-23学习地图
    HashMap<K,V>类
    2020-3-21学习地图
    模板模式
    2020-3-20学习地图
    字符串常量池String Constant Pool
    2020-3-19学习地图
    2020-3-18学习地图
    MySQL游标
    2020-3-16学习地图
  • 原文地址:https://www.cnblogs.com/kingfly/p/4042442.html
Copyright © 2011-2022 走看看