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


Posted in Javascript onMay 31, 2016

很多网站都有公告,并且都喜欢用横向滚动的方式来展现。最近自己用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>3water.com</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文字横向滚动效果的实现代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript中的变量使用说明
May 18 Javascript
javascript的原生方法获取数组中的最大(最小)值
Dec 19 Javascript
在jQuery中 常用的选择器介绍
Apr 16 Javascript
JS折半插入排序算法实例
Dec 02 Javascript
详解Angularjs filter过滤器
Feb 06 Javascript
JavaScript算法系列之快速排序(Quicksort)算法实例详解
Sep 04 Javascript
JavaScript对象拷贝与Object.assign用法实例分析
Jun 20 Javascript
js+css实现红包雨效果
Jul 12 Javascript
jQuery 获取除某指定对象外的其他对象 ( :not() 与.not())
Oct 10 jQuery
微信小程序城市选择及搜索功能的方法
Mar 22 Javascript
通过vue手动封装on、emit、off的代码详解
May 29 Javascript
一文帮你理解PReact10.5.13源码
Apr 03 Javascript
Javascript实现跑马灯效果的简单实例
May 31 #Javascript
javascript实现简易计算器的代码
May 31 #Javascript
javascript实现任务栏消息提示的简单实例
May 31 #Javascript
SWFUpload多文件上传及文件个数限制的方法
May 31 #Javascript
js弹出框、对话框、提示框、弹窗实现方法总结(推荐)
May 31 #Javascript
javascript事件模型介绍
May 31 #Javascript
使用JavaScript实现弹出层效果的简单实例
May 31 #Javascript
You might like
php session_start()关于Cannot send session cache limiter - headers already sent错误解决方法
2009/11/27 PHP
解析使用substr截取UTF-8中文字符串出现乱码的问题
2013/06/20 PHP
CodeIgniter模板引擎使用实例
2014/07/15 PHP
php查询mssql出现乱码的解决方法
2014/12/29 PHP
PDO的安全处理与事物处理方法
2016/10/31 PHP
PHP调用Mailgun发送邮件的方法
2017/05/04 PHP
php读取本地json文件的实例
2018/03/07 PHP
Laravel框架实现的使用smtp发送邮件功能示例
2019/03/12 PHP
PHP数组访问常用方法解析
2020/09/05 PHP
PHP实现长轮询消息实时推送功能代码实例讲解
2021/02/26 PHP
漂亮的widgets,支持换肤和后期开发新皮肤
2007/04/23 Javascript
innerhtml用法 innertext用法 以及innerHTML与innertext的区别
2009/10/26 Javascript
有关于JS辅助函数inherit()的问题
2013/04/07 Javascript
浅析JavaScript中的类型和对象
2013/11/29 Javascript
jquery中$.post()方法的简单实例
2014/02/04 Javascript
使用insertAfter()方法在现有元素后添加一个新元素
2014/05/28 Javascript
js+html5绘制图片到canvas的方法
2015/06/05 Javascript
javascript实现label标签跳出循环操作
2016/03/06 Javascript
Javascript中call,apply,bind方法的详解与总结
2016/12/12 Javascript
移动端界面的适配
2017/01/11 Javascript
简单实现js点击展开二级菜单功能
2017/05/16 Javascript
js学使用setTimeout实现轮循动画
2017/07/17 Javascript
js实现页面多个日期时间倒计时效果
2019/06/20 Javascript
vue的keep-alive用法技巧
2019/08/15 Javascript
[00:27]DOTA2荣耀之路2:Patience from zhou!
2018/05/24 DOTA
Python实现Const详解
2015/01/27 Python
Python函数中*args和**kwargs来传递变长参数的用法
2016/01/26 Python
大数据分析用java还是Python
2020/07/06 Python
Python lambda表达式原理及用法解析
2020/08/18 Python
详解H5本地储存Web Storage
2017/07/03 HTML / CSS
MYSQL基础面试题
2012/05/13 面试题
《乡愁》教学反思
2014/02/18 职场文书
2014年初中班主任工作总结
2014/11/08 职场文书
青年教师听课心得体会
2016/01/15 职场文书
python实现黄金分割法的示例代码
2021/04/28 Python
Golang流模式之grpc的四种数据流
2022/04/13 Golang