jQuery文字横向滚动效果的实现代码

 更新时间:2016年05月31日 10:41:02   投稿:jingxian  
下面小编就为大家带来一篇jQuery文字横向滚动效果的实现代码。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧

很多网站都有公告,并且都喜欢用横向滚动的方式来展现。最近自己用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.jb51.net</span></div> 

</div>

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();

以上这篇jQuery文字横向滚动效果的实现代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • jquery实现的点击翻书效果代码

    jquery实现的点击翻书效果代码

    这篇文章主要介绍了jquery实现的点击翻书效果代码,可呈现点击图片显示翻页的效果,涉及jQuery响应鼠标事件动态改变页面元素属性的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-11-11
  • 基于jquery的横向滚动条(滑动条)

    基于jquery的横向滚动条(滑动条)

    ASP.Net的GridView本身不带滚动条,可通过Panel实现。但是Windows自带的横向滚动条只支持显示在下方,为了使用方便,需要在上下方都显示横向滚动条。
    2011-02-02
  • jQuery使用bind函数实现绑定多个事件的方法

    jQuery使用bind函数实现绑定多个事件的方法

    这篇文章主要介绍了jQuery使用bind函数实现绑定多个事件的方法,结合简单实例形式分析了jQuery使用bind函数进行多个事件绑定的操作技巧与注意事项,需要的朋友可以参考下
    2017-10-10
  • jQuery Easyui datagrid行内实现【添加】、【编辑】、【上移】、【下移】

    jQuery Easyui datagrid行内实现【添加】、【编辑】、【上移】、【下移】

    本篇文章主要介绍jQuery Easyui datagrid行内实现【添加】、【编辑】、【上移】、【下移】 。datagrid现在具有行编辑能力了,可以添加和编辑数据,同时对行内数据上移下移。
    2016-12-12
  • jQuery基于Ajax实现读取XML数据功能示例

    jQuery基于Ajax实现读取XML数据功能示例

    这篇文章主要介绍了jQuery基于Ajax实现读取XML数据功能,结合实例形式分析了jQuery基于ajax的get方式获取xml文件数据并输出显示相关操作技巧,需要的朋友可以参考下
    2018-05-05
  • jQuery 实现DOM元素拖拽交换位置的实例代码

    jQuery 实现DOM元素拖拽交换位置的实例代码

    这篇文章主要介绍了jQuery 实现DOM元素拖拽交换位置,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-07-07
  • Jquery使用小技巧汇总

    Jquery使用小技巧汇总

    本文给大家汇总介绍了一下Jquery使用小技巧,算是比较全面了,一共26个小店,非常细致,需要的朋友可以参考下
    2015-12-12
  • 一次失败的jQuery优化尝试小结

    一次失败的jQuery优化尝试小结

    我经常抱怨jQuery的DOM操作性能并不优秀,并且经常尝试用一些方法去进行优化,但是越是优化,越是沮丧地发现jQuery其实已经做得很好,从使用者的角度能够进行的优化实在有限
    2011-02-02
  • 精心挑选的15个jQuery下拉菜单制作教程

    精心挑选的15个jQuery下拉菜单制作教程

    下拉菜单是网站导航常用的表现形式之一,能够呈现更多的导航内容。如果网站能够设计出有吸引力的网站导航,将会吸引更多的用户去浏览网站的内容
    2012-06-06
  • jQuery中ajax错误调试分析

    jQuery中ajax错误调试分析

    jQuery中把ajax封装得非常好。但是日常开发中,我偶尔还是会遇到ajax报错。本文进行简单分析一下ajax报错。需要的朋友可以参考下
    2016-12-12

最新评论