jQuery实现文字横向滚动效果
Posted 雅望天堂
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jQuery实现文字横向滚动效果相关的知识,希望对你有一定的参考价值。
html代码:
<div id="aaa" 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> </div> </div>
Jquery代码:
$.fn.textScroll=function(){ 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); }
页面调用:
$(function(){ $("#aaa").textScroll();//aaa为最外层div的Id 也可写Class 如:$(".aaa") 此处aaa为class名 });
以上是关于jQuery实现文字横向滚动效果的主要内容,如果未能解决你的问题,请参考以下文章