小虾虎鱼

小虾虎鱼

jQuery文字横向滚动效果

作者 禾惠 发表于 2013/07/29,最后修改于 2013/07/29

很多网站都有公告,并且都喜欢用横向滚动的方式来展现。最近自己用jQuery也写了文字横向滚动,实现了自定义滚动速度,鼠标经过时暂停的功能。

HTML代码如下:

<div id="s" style="width:100px; position:relative; white-space:nowrap; overflow:hidden; height:20px;">
    <div id="noticeList" style="position:absolute; top:0; height:20px;"><span>jQuery文字横向滚动</span><span>jQuery制作文字横向滚动</span><span>www.xiaoboy.com原创</span></div>
</div>


http://www.xiaoboy.com  小虾虎鱼原创


JS代码:

方法一:

$.fn.textScroll=function(){
    var speed=60,flag=null,tt,that=$(this),child=that.children();
    var p_w=that.width(), w=child.width();
    child.css({left:p_w});
    var t=(w+p_w)/speed * 1000;
    function play(m){
        var tm= m==undefined ? t : m;
        child.animate({left:-w},tm,"linear",function(){             
            $(this).css("left",p_w);
            play();
        });                 
    }
    child.on({
        mouseenter:function(){
            var l=$(this).position().left;
            $(this).stop();
            tt=(-(-w-l)/speed)*1000;
        },
        mouseleave:function(){
            play(tt);
            tt=undefined;
        }
    });
    play();
}


方法二:

$.fn.textScroll=functioon(){
    var p = $(this),
        c = p.children(),
        speed=3000;// 值越大,速度越小
    var cw = c.width(),pw=p.width();
    var t = (cw / 100) * speed;
    var f = null, t1 = 0;
    function ani(tm) {
        counttime();
        c.animate({ left: -cw }, tm, "linear", function () {
            c.css({ left: pw });
            clearInterval(f);
            t1 = 0;
            t=((cw+pw)/100)*speed;
            ani(t);
        });
    }
    function counttime() {
        f = setInterval(function () {
            t1 += 10;
        }, 10);
    }
    p.on({
        mouseenter: function () {
            c.stop(false, false);
            clearInterval(f);
            console.log(t1);
        },
        mouseleave: function () {
            ani(t - t1);
            console.log(t1);
        }
    });
    ani(t);
}


最后调用$("#s").textScroll();