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面向对象之Javascript 继承
May 04 Javascript
javscript对象原型的一些看法
Sep 19 Javascript
js DOM 元素ID就是全局变量
Sep 20 Javascript
js解析与序列化json数据(二)序列化探讨
Feb 01 Javascript
Javascript代码在页面加载时的执行顺序介绍
May 03 Javascript
js获取当前路径的简单示例代码
Jan 08 Javascript
JavaScript学习笔记之Cookie对象
Jan 22 Javascript
js轮播图代码分享
Jul 14 Javascript
用js实现博客打赏功能
Oct 24 Javascript
微信小程序 图片宽度自适应的实现
Apr 06 Javascript
node中IO以及定时器优先级详解
May 10 Javascript
使用js和canvas实现时钟效果
Sep 08 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
thinkPHP中分页用法实例分析
2015/12/26 PHP
php使用escapeshellarg时中文被过滤的解决方法
2016/07/10 PHP
PHP获取redis里不存在的6位随机数应用示例【设置24小时过时】
2017/06/07 PHP
IE和firefox浏览器的event事件兼容性汇总
2009/12/06 Javascript
input链接页面、打开新网页等等的具体实现
2013/12/30 Javascript
学习Bootstrap组件之下拉菜单
2015/07/28 Javascript
jQuery无刷新切换主题皮肤实例讲解
2015/10/21 Javascript
JavaScript原型及原型链终极详解
2016/01/04 Javascript
详解Javascript中的原型OOP
2016/10/12 Javascript
简易的JS计算器实现代码
2016/10/18 Javascript
BootStrap tooltip提示框使用小结
2016/10/26 Javascript
jQuery实现标签页效果实战(4)
2017/02/08 Javascript
Node.js事件的正确使用方法
2019/04/05 Javascript
为vue项目自动设置请求状态的配置方法
2019/06/09 Javascript
JavaScript实现打砖块游戏
2020/02/25 Javascript
开发Node CLI构建微信小程序脚手架的示例
2020/03/27 Javascript
[01:05:40]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS DT第三场
2014/05/24 DOTA
Python下singleton模式的实现方法
2014/07/16 Python
Django应用程序中如何发送电子邮件详解
2017/02/04 Python
利用Python2下载单张图片与爬取网页图片实例代码
2017/12/25 Python
对pandas中Series的map函数详解
2018/07/25 Python
详解用Python练习画个美队盾牌
2019/03/23 Python
python:目标检测模型预测准确度计算方式(基于IoU)
2020/01/18 Python
python2.7使用scapy发送syn实例
2020/05/05 Python
Python filter()及reduce()函数使用方法解析
2020/09/05 Python
详解使用Python写一个向数据库填充数据的小工具(推荐)
2020/09/11 Python
python 可视化库PyG2Plot的使用
2021/01/21 Python
Python爬虫制作翻译程序的示例代码
2021/02/22 Python
HTML5 LocalStorage 本地存储详细概括(多图)
2017/08/18 HTML / CSS
英国汽车座椅和婴儿车购物网站:Uber Kids
2017/04/19 全球购物
如何防止同一个帐户被多人同时登录
2013/08/01 面试题
感恩祖国演讲稿
2014/09/09 职场文书
健康状况证明书
2014/11/26 职场文书
2015年母亲节活动策划方案
2015/05/04 职场文书
签约仪式致辞
2015/07/30 职场文书
分享几个实用的CSS代码块
2022/06/10 HTML / CSS