码迷,mamicode.com
首页 > Web开发 > 详细

jQuery实现文字横向滚动效果

时间:2017-03-20 16:22:26      阅读:255      评论:0      收藏:0      [点我收藏+]

标签:bsp   idt   class   top   leave   tin   lin   interval   stop   

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实现文字横向滚动效果

标签:bsp   idt   class   top   leave   tin   lin   interval   stop   

原文地址:http://www.cnblogs.com/liuyanpeng/p/6589680.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!