码迷,mamicode.com
首页 > 其他好文 > 详细

向上无缝滚动,鼠标放在上面会停止滚动

时间:2017-10-31 12:59:27      阅读:215      评论:0      收藏:0      [点我收藏+]

标签:inter   app   tin   over   font   flow   script   cti   javascrip   

一般在页面上都会出现一条一条的通告,有些会使用向上滚动或者左右滚动的方式来展示,这样比较美观又不占位置;

现在就说一下这个向上的无缝滚动怎么做

1:html

    <div class="two_fr_list">
        <ul style="margin-top: -1px;">
            <li>1111111111111111111111111</li>
            <li>222222222222222222222222</li>
            <li>3333333333333333333333</li>
            <li>44444444444444444444444444</li>
            <li>5555555555555555555555555555555</li>
            <li>6666666666666666666666666666666</li>
            <li>777777777777777777777777777</li>
            <li>88888888888888888888888888</li>
            <li>9999999999999999999999999999</li>
            <li>111111111111111111111111</li>
            <li>2222222222222222222222222222222</li>
            <li>33333333333333333333333</li>
            <li>4444444444444444444</li>
            <li>55555555555555555555555555</li>
            <li>66666666666666666666666666666666666</li>
            <li>7777777777777777777777777777777777</li>
            <li>8888888888888888888888888888888888</li>
            <li>999999999999999999999999999999999</li>
        </ul>
    </div>

2:css要设置一下展示这些内容的高度

    .two_fr_list {
        margin: 20px 20px 0;
        line-height: 28px;
        font-size: 16px;
        height: 340px;
        overflow: hidden;
    }

3:引入jq库

4:js

// JavaScript Document 包装
(function($){
    $.fn.myScroll = function(options){
    //默认配置
    var defaults = {
        speed:40,  //滚动速度,值越大速度越慢
        rowHeight:24 //每行的高度
    };
    
    var opts = $.extend({}, defaults, options),intId = [];
    
    function marquee(obj, step){
    
        obj.find("ul").animate({
            marginTop: ‘-=1‘
        },0,function(){
                var s = Math.abs(parseInt($(this).css("margin-top")));
                if(s >= step){
                    $(this).find("li").slice(0, 1).appendTo($(this));
                    $(this).css("margin-top", 0);
                }
            });
        }
        
        this.each(function(i){
            var sh = opts["rowHeight"],speed = opts["speed"],_this = $(this);
            intId[i] = setInterval(function(){
                if(_this.find("ul").height()<=_this.height()){
                    clearInterval(intId[i]);
                }else{
                    marquee(_this, sh);
                }
            }, speed);

            _this.hover(function(){
                clearInterval(intId[i]);
            },function(){
                intId[i] = setInterval(function(){
                    if(_this.find("ul").height()<=_this.height()){
                        clearInterval(intId[i]);
                    }else{
                        marquee(_this, sh);
                    }
                }, speed);
            });
        
        });

    }

})(jQuery);

    $(document).ready(function () {
        $("div.two_fr_list").myScroll({
            speed: 40, //数值越大,速度越慢
            rowHeight: 28 //li的高度
        });
    })

 

向上无缝滚动,鼠标放在上面会停止滚动

标签:inter   app   tin   over   font   flow   script   cti   javascrip   

原文地址:http://www.cnblogs.com/huahua0825/p/7760604.html

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