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

  • 更新时间:2022-07-04 09:35:42
  • 编辑:家翠安
我们帮大家精选了jQuery相关的编程文章,网友余意远根据主题投稿了本篇教程内容,涉及到jQuery文字横向滚动相关内容,已被230网友关注,下面的电子资料对本篇知识点有更加详尽的解释。

参考资料

正文内容

很多网站都有公告,并且都喜欢用横向滚动的方式来展现。最近自己用jQuery也写了文字横向滚动,实现了自定义滚动速度,鼠标经过时暂停的功能。

HTML代码如下:

<div id="s" > 

<div id="noticeList" ><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的教程,这篇文章主要介绍了如何在jQuery中跳转到另外一个网页HTML,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

    发布时间:2022-06-15

  • JQuery带排序功能的权限选择代码详解

    这篇文章主要介绍了JQuery带排序功能的权限选择,涉及jQuery鼠标事件及json数据处理的相关技巧,需要的朋友可以参考下

    发布时间:2019-08-09

  • 解析jquery Ajax 实现加载数据前动画效果

    本篇文章主要是对jquery Ajax实现加载数据前动画效果的示例代码进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助

    发布时间:2020-01-27

  • 解析jQuery获取键盘事件方案

    这篇文章主要介绍了jQuery简单获取键盘事件的方法,涉及jQuery针对键盘事件的获取与响应技巧,需要的朋友可以参考下

    发布时间:2020-02-28

  • jQuery的ajax封装方法实例内容

    AJAX 是一种用于创建快速动态网页的技术。这篇文章主要介绍了基于jQuery的ajax方法封装的相关资料,需要的朋友可以参考下

    发布时间:2020-05-21

  • jquery风琴Panel效果实现代码

    我们今天要做的是手风琴panel,jquery.ui里面有个叫做accordtion的插件,我们要实现的效果和他一样

    发布时间:2019-11-15

  • jQuery中可见性过滤器如何使用

    这篇文章主要介绍了jQuery中可见性过滤器简单用法,结合实例形式简单分析了jQuery中可见性过滤器的原理及相关使用技巧,需要的朋友可以参考下

    发布时间:2021-05-08

  • jQuery图片轮播幻灯片特效代码整理

    这篇文章主要介绍了jQuery超精致图片轮播幻灯片特效,图片轮播效果特别适合做产品展示,感兴趣的小伙伴可以参考下。

    发布时间:2020-04-12

  • jquery html动态生成select标签出问题该如何解决

    用jquery,json从后台获取一个列表,然后用一个动态生成的select标签显示出来,结果出现错误,下面为大家分享个不错的解决方法,喜欢的朋友可以参考下

    发布时间:2020-02-05

  • jQuery使用ajaxSubmit()提交表单方法步骤

    这篇文章主要介绍了jQuery使用ajaxSubmit()提交表单示例,使用延第三方插件jquery.form实现,需要的朋友可以参考下

    发布时间:2020-01-23

用户留言