jQuery文字无缝滚动效果代码

领号实时播报

• 1000000领号获得

  网游战江湖公测豪华礼包17:28:05

• 2000000领号获得

  网游战江湖公测豪华礼包17:28:05

• 3000000领号获得

  网游战江湖公测豪华礼包17:28:05

• 4000000领号获得

  网游战江湖公测豪华礼包17:28:05

• 5000000领号获得

  网游战江湖公测豪华礼包17:28:05

• 6000000领号获得

  网游战江湖公测豪华礼包17:28:05

• 7000000领号获得

  网游战江湖公测豪华礼包17:28:05

• 8000000领号获得

  网游战江湖公测豪华礼包17:28:05

• 9000000领号获得

  网游战江湖公测豪华礼包17:28:05

• 1000000领号获得

  网游战江湖公测豪华礼包17:28:05

• 1100000领号获得

  网游战江湖公测豪华礼包17:28:05

• 1200000领号获得

  网游战江湖公测豪华礼包17:28:05

适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持及以下浏览器。

 

css --------------------------------

ul,li,dl,ol{list-style:none;}
a{color:#ffffff; text-decoration:none;}

.box{ margin:0 auto;}
.bcon{ width:270px; border:1px solid #EED165; margin:2px auto; margin-top: 15px;}
.bcon h1{ border-bottom:1px solid #eee; padding:0 10px;}
.bcon h1 b{ font:bold 14px/40px '宋体'; border-top:2px solid #EED165; padding:0 8px; margin-top:-1px; display:inline-block;}

.list_lh{ height:700px; overflow:hidden;}
.list_lh li{ padding:10px;}
.list_lh li.lieven{ background:#ffffff; }

.list_lh li p{ height:24px; line-height:24px;}
.list_lh li p a{ float:left; }
.list_lh li p em{ width:80px; font:normal 12px/24px Arial; color:#FF3300; float:right; display:inline-block;}
.list_lh li p span{ color:#ffffff; float:right;}
.list_lh li p a.btn_lh{ background:#28BD19; height:17px; line-height:17px; color:#fff; padding:0 5px; margin-top:4px; display:inline-block; float:right;}

.list_lh li.lieven a{ color: #000000}
.list_lh li.lieven span{ color: #000000}
.btn_lh:hover{ color:#fff; text-decoration:none;}

.btm p{ font:normal 12px/24px 'Microsoft YaHei'; text-align:center;}

 

html------------------------------

<div class="box">
    <div class="bcon">
        <h1><b>领号实时播报</b></h1>
        <!-- 代码开始 -->
        <div class="list_lh">
            <ul>
                <li>
                    <p><a href="http://www.16sucai.com/" target="_blank">1000000</a><a href="http://www.16sucai.com/" target="_blank" class="btn_lh">领号</a><em>获得</em></p>
                    <p><a href="http://www.16sucai.com/" target="_blank" class="a_blue">网游战江湖公测豪华礼包</a><span>17:28:05</span></p>
                </li>
                                ………………
                                ………………
            </ul>
        </div>
        <!-- 代码结束 -->
    </div>
    
    <div class="btm">
    <p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持及以下浏览器。</p>

    </div>
    
</div>

 

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);

 

转载于:https://www.cnblogs.com/whcghost/articles/5172026.html