很多网站都有公告，并且都喜欢用横向滚动的方式来展现。最近自己用jQuery也写了文字横向滚动，实现了自定义滚动速度，鼠标经过时暂停的功能。
JS代码：
方法一：
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();
}
方法二：
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 },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();
以上这篇jQuery文字横向滚动效果的实现代码就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持编程之家。
原文链接：https://www.f2er.com/jquery/48282.html