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 相关文章推荐
jquery遍历筛选数组的几种方法和遍历解析json对象
Dec 13 Javascript
常见的jQuery选择器汇总
Nov 24 Javascript
js实现文本框输入文字个数限制代码
Dec 25 Javascript
javascript使用Promise对象实现异步编程
Mar 01 Javascript
JavaScript笔记之数据属性和存储器属性
Mar 31 Javascript
深入浅析JavaScript中的arguments对象(强力推荐)
Jun 03 Javascript
webpack2.0配置postcss-loader的方法
Aug 17 Javascript
Mui使用jquery并且使用点击跳转新窗口的实例
Aug 19 jQuery
jQuery实现验证表单密码一致性及正则表达式验证邮箱、手机号的方法
Dec 05 jQuery
微信小程序实现获取小程序码和二维码java接口开发
Mar 29 Javascript
详解ES6 export default 和 import语句中的解构赋值
May 28 Javascript
vue实现按钮切换图片
Jan 20 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多个文件上传到服务器实例
2014/10/29 PHP
PHP中实现Bloom Filter算法
2015/03/30 PHP
php抽象方法和普通方法的区别点总结
2019/10/13 PHP
js下用gb2312编码解码实现方法
2009/12/31 Javascript
jQuery 常见操作实现方式和常用函数方法总结
2011/05/06 Javascript
js中function()使用方法
2013/12/24 Javascript
js格式化金额可选是否带千分位以及保留精度
2014/01/28 Javascript
实例详解jQuery结合GridView控件的使用方法
2016/01/04 Javascript
JS弹出新窗口被拦截的解决方法
2016/08/09 Javascript
jQuery Easyui 下拉树组件combotree
2016/12/16 Javascript
javascript图片预览和上传(兼容IE)
2017/03/15 Javascript
JS实现中文汉字按拼音排序的方法
2017/10/09 Javascript
js实现以最简单的方式将数组元素添加到对象中的方法
2017/12/20 Javascript
select获取下拉框的值 下拉框默认选中方法
2018/02/28 Javascript
JS利用prototype给类添加方法操作详解
2019/06/21 Javascript
Python版实现微信公众号扫码登陆
2020/05/28 Javascript
Vue循环中多个input绑定指定v-model实例
2020/08/31 Javascript
[05:04]完美世界携手游戏风云打造 卡尔工作室地图界面篇
2013/04/23 DOTA
python采用requests库模拟登录和抓取数据的简单示例
2014/07/05 Python
python字符串替换的2种方法
2014/11/30 Python
Python+matplotlib+numpy绘制精美的条形统计图
2018/01/02 Python
Python对切片命名的实现方法
2018/10/16 Python
python算法与数据结构之单链表的实现代码
2019/06/27 Python
Django 开发环境配置过程详解
2019/07/18 Python
python 计算两个列表的相关系数的实现
2019/08/29 Python
使用Python实现正态分布、正态分布采样
2019/11/20 Python
tensorflow -gpu安装方法(不用自己装cuda,cdnn)
2020/01/20 Python
Python 创建守护进程的示例
2020/09/29 Python
python 统计list中各个元素出现的次数的几种方法
2021/02/20 Python
Python 带星号(* 或 **)的函数参数详解
2021/02/23 Python
HTML5新增加标签和功能概述
2016/09/05 HTML / CSS
教师求职自荐信
2014/03/09 职场文书
校园文化标语
2014/06/18 职场文书
2014年财务个人工作总结
2014/12/08 职场文书
红楼梦读书笔记
2015/06/25 职场文书
80行代码写一个Webpack插件并发布到npm
2021/05/24 Javascript