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修改css样式style动态改变元素样式
Dec 16 Javascript
js仿百度贴吧验证码特效实例代码
Jan 16 Javascript
js日期相关函数dateAdd,dateDiff,dateFormat等介绍
Sep 24 Javascript
AngularJS全局scope与Isolate scope通信用法示例
Nov 22 Javascript
JS实现含有中文字符串的友好截取功能分析
Mar 13 Javascript
深入剖析Node.js cluster模块
May 23 Javascript
node实现简单的增删改查接口实例代码
Aug 22 Javascript
js实现简单的日历显示效果函数示例
Nov 25 Javascript
Vue vm.$attrs使用场景详解
Mar 08 Javascript
keep-alive不能缓存多层级路由菜单问题解决
Mar 10 Javascript
使用Typescript和ES模块发布Node模块的方法
May 25 Javascript
Vue 事件的$event参数=事件的值案例
Jan 29 Vue.js
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的FTP学习(二)[转自奥索]
2006/10/09 PHP
解决phpmyadmin 乱码,支持gb2312和utf-8
2006/11/20 PHP
ThinkPHP调试模式与日志记录概述
2014/08/22 PHP
php实现根据IP地址获取其所在省市的方法
2015/04/30 PHP
zend framework中使用memcache的方法
2016/03/04 PHP
PHP里的$_GET数组介绍
2019/03/22 PHP
javascript 冒号 使用说明
2009/06/06 Javascript
javascript 函数速查表
2010/02/07 Javascript
javascript操作cookie的文章(设置,删除cookies)
2010/04/01 Javascript
Javascript实现关联数据(Linked Data)查询及注意细节
2013/02/22 Javascript
jQuery 顶部导航跟随滚动条滚动固定浮动在顶部
2014/06/06 Javascript
js 数组去重的四种实用方法
2014/09/09 Javascript
jQuery中click事件用法实例
2014/12/26 Javascript
jQuery简单实现日历的方法
2015/05/04 Javascript
jQuery实现仿腾讯迷你首页选项卡效果代码
2015/09/17 Javascript
jQuery遍历json的方法分析
2016/04/16 Javascript
JavaScript 实现的checkbox经典实例分享
2016/10/16 Javascript
Three.js利用顶点绘制立方体的方法详解
2017/09/27 Javascript
Vue点击切换Class变化,实现Active当前样式操作
2020/07/17 Javascript
搭建vscode+vue环境的详细教程
2020/08/31 Javascript
vue2.0 watch里面的 deep和immediate用法说明
2020/10/30 Javascript
Python使用urllib模块的urlopen超时问题解决方法
2014/11/08 Python
对Python的zip函数妙用,旋转矩阵详解
2018/12/13 Python
Python使用Selenium爬取淘宝异步加载的数据方法
2018/12/17 Python
python里dict变成list实例方法
2019/06/26 Python
Pycharm 2019 破解激活方法图文详解
2019/10/11 Python
CSS3中Transition动画属性用法详解
2016/07/04 HTML / CSS
HTML5中新标签和常用标签详解
2014/03/07 HTML / CSS
加拿大便宜的隐形眼镜商店:Clearly
2016/09/15 全球购物
法人授权委托书
2014/04/03 职场文书
法人委托书范本
2014/04/04 职场文书
大学生活动总结怎么写
2014/04/29 职场文书
中学教师暑期培训方案
2014/08/27 职场文书
2015年建筑工作总结报告
2015/05/04 职场文书
高一军训口号
2015/12/25 职场文书
星际争霸:毕姥爷vs解冻01
2022/04/01 星际争霸