jQuery文字横向滚动效果的实现代码
- 更新时间：2022-07-04 09:35:42
- 编辑：家翠安
参考资料
- Web前端开发技术(jQuery+Ajax 慕课版) PDF 电子书 / 12.23MB / 谭丽娜 推荐度：
- 锋利的jQuery PDF 电子书 / 194.9 MB / 单东林 张晓菲 魏 推荐度：
- jQuery实战（第2版） PDF 电子书 / 29.9 MB / [美]Bear Bibeault / [美]Yehuda Katz 推荐度：
正文内容
很多网站都有公告，并且都喜欢用横向滚动的方式来展现。最近自己用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中跳转到另外一个网页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
