jquery xMarquee实现文字水平无缝滚动效果


Posted in Javascript onApril 29, 2014

jquery xMarquee实现文字水平无缝滚动效果 
css

<style> 
.xMarquee{border:1px solid #ccc;height:25px;width:500px; margin:50px auto; background:#ffffff; overflow:hidden;} 
.xMarquee ol{list-style-type:none; margin:0px; padding:0px; font-size:12px; width:100000%;} 
.xMarquee ol li{float:left;} 
.xMarquee ol li a{ color:#000; text-decoration:none; line-height:25px;} 
.xMarquee ol li a:hover{ text-decoration:underline;} 
</style>

js
<script src="xMarquee.js" type="text/javascript"></script> <script> 
$(function(){ 
$("#x1").xMarquee(); 
$("#x2").xMarquee({temp:2,backMarquee:'backMarquee'}); 
}) 

function backMarquee(id,con){ 
$("#backMarquee").html(id+"::::::::::::::::::::"+con); 
} 
</script>

html
<div id="x1" class="xMarquee"> 
<ol> 
<li><a href="" >♠ 中国移动</a></li> 
<li><a href="" >♠ 双向录音</a></li> 
<li><a href="" >♠ 360通话录音是目前较好的</a></li> 
<li><a href="" >♠ 中国移动</a></li> 
<li><a href="" >♠ 双向录音</a></li> 
<li><a href="" >♠ 360通话录音是目前较好的</a></li> 
</ol> 
</div> <div id="x2" class="xMarquee"> 
<ol> 
<li><a href="" >♠ 中国移动</a></li> 
<li><a href="" >♠ 双向录音</a></li> 
<li><a href="" >♠ 360通话录音是目前较好的</a></li> 
<li><a href="" >♠ 中国移动</a></li> 
<li><a href="" >♠ 双向录音</a></li> 
<li><a href="" >♠ 360通话录音是目前较好的</a></li> 
</ol> 
</div>

文字滚动如此简单
演示打包下载

本文来自: csdn 高山and流水博客

Javascript 相关文章推荐
通过DOM脚本去设置样式信息
Sep 19 Javascript
js动态加载以及确定加载完成的代码
Jul 31 Javascript
jquery移除、绑定、触发元素事件使用示例详解
Apr 10 Javascript
node.js中的path.resolve方法使用说明
Dec 08 Javascript
js友好的时间返回函数
Aug 24 Javascript
原生js实现轮播图
Feb 27 Javascript
基于代数方程库Algebra.js解二元一次方程功能示例
Jun 09 Javascript
js注册时输入合法性验证方法
Oct 21 Javascript
JS中this的指向以及call、apply的作用
May 06 Javascript
ES6中let、const的区别及变量的解构赋值操作方法实例分析
Oct 15 Javascript
简单了解JavaScript作用域
Jul 31 Javascript
js实现滚动条自动滚动
Dec 13 Javascript
jquery form 隐藏的input 选择
Apr 29 #Javascript
js写出遮罩层登陆框和对联广告并自动跟随滚动条滚动
Apr 29 #Javascript
window resize和scroll事件的基本优化思路
Apr 29 #Javascript
js父窗口关闭时子窗口随之关闭完美解决方案
Apr 29 #Javascript
JS截取url中问号后面参数的值信息
Apr 29 #Javascript
javascript类型转换示例
Apr 29 #Javascript
常见浏览器多长时间会提示“脚本运行时间过长”总结
Apr 29 #Javascript
You might like
使用PHP实现下载CSS文件中的图片
2015/12/06 PHP
完美解决phpexcel导出到xls文件出现乱码的问题
2016/10/29 PHP
图片自动缩小的js代码,用以防止图片撑破页面
2007/03/12 Javascript
jquery插件制作 手风琴Panel效果实现
2012/08/17 Javascript
js window.onload 加载多个函数和追加函数详解
2014/01/08 Javascript
javascript进行数组追加方法小结
2014/06/16 Javascript
jquery获取选中的文本和值的方法
2014/07/08 Javascript
angularjs 源码解析之scope
2016/08/22 Javascript
JS操作input标签属性checkbox全选的实现代码
2017/03/02 Javascript
jQuery插件HighCharts绘制2D圆环图效果示例【附demo源码下载】
2017/03/09 Javascript
vue+webpack实现异步组件加载的方法
2018/02/03 Javascript
vue中使用 pako.js 解密 gzip加密字符串的方法
2019/06/10 Javascript
浅谈laytpl 模板空值显示null的解决方法及简单的js表达式
2019/09/19 Javascript
js实现圆形显示鼠标单击位置
2020/02/11 Javascript
vue实现带过渡效果的下拉菜单功能
2020/02/19 Javascript
[01:24]2014DOTA2 TI第二日 YYF表示这届谁赢都有可能
2014/07/11 DOTA
[02:51]DOTA2 2015国际邀请赛中国区预选赛第一日战报
2015/05/27 DOTA
python正则表达式之作业计算器
2016/03/18 Python
Linux 发邮件磁盘空间监控(python)
2016/04/23 Python
使用python装饰器计算函数运行时间的实例
2018/04/21 Python
Sanic框架Cookies操作示例
2018/07/17 Python
Pycharm如何打断点的方法步骤
2019/06/13 Python
Python叠加两幅栅格图像的实现方法
2019/07/05 Python
Python统计文本词汇出现次数的实例代码
2020/02/27 Python
python -v 报错问题的解决方法
2020/09/15 Python
python函数超时自动退出的实操方法
2020/12/28 Python
app内嵌H5 webview 本地缓存问题的解决
2020/10/19 HTML / CSS
eDreams澳大利亚:预订机票、酒店和度假产品
2017/04/19 全球购物
高街生活方式全球在线商店:AZBRO
2017/08/26 全球购物
90后毕业生的求职信范文
2013/09/21 职场文书
教师自我鉴定
2013/12/13 职场文书
请假条的格式
2014/04/11 职场文书
2015年大学生实习评语
2015/03/25 职场文书
2016学习雷锋精神活动倡议书
2015/04/27 职场文书
少年雷锋观后感
2015/06/10 职场文书
go类型转换及与C的类型转换方式
2021/05/05 Golang