文字上下无缝滚动效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery文字无缝滚动效果代码</title>
<style type="text/css">
    *{margin:0;padding:0;font-size:12px;}
    input,button,select,textarea{outline:none;}
    ul,li,dl,ol{list-style:none;}
    a{color:#666;text-decoration:none;}
    .bcon{
        width:270px;
        border:1px solid #eee;
        margin:30px auto;
    }
    .bcon h2{
        border-bottom:1px solid #eee;
        padding:0 10px;
    }
    .bcon h2 b{
        font:bold 14px/40px '宋体';
        padding:0 8px;
        display:inline-block;
    }
    .list_lh{
        height:400px;
        overflow:hidden;
    }
    .list_lh li{
        height:68px;
        line-height:68px;
    }
    .list_lh li.lieven{
        background:#F0F2F3;
    }
    .btn_lh:hover{
        color:#fff;
        text-decoration:none;
    }
</style>
<body>
<div class="bcon">
    <h2><b>领号实时播报</b></h2>
    <div class="list_lh">
        <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>
        </ul>
    </div>
</div>
<script type="text/javascript" src="http://libs.baidu.com/jquery/2.0.3/jquery.min.js"></script>
<script type="text/javascript" src="scroll.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $('.list_lh li:even').addClass('lieven');
    $("div.list_lh").myScroll({
        speed:40, //数值越大,速度越慢
        rowHeight:68 //li的高度
    });
})
</script>
</body>
</html>
(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);

运行效果图

posted @ 2016-07-12 17:35  想旅游咯  阅读(372)  评论(0编辑  收藏  举报