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名
- });
来源: http://www.bubuko.com/infodetail-1988884.html