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 相关文章推荐
JS 文件大小判断的实现代码
Apr 07 Javascript
table行随鼠标移动变色示例
May 07 Javascript
介绍JavaScript的一个微型模版
Jun 24 Javascript
javascript实现拖动元素交换位置
Nov 29 Javascript
Bootstrap实现导航栏的2种方式
Nov 28 Javascript
详解Jquery Easyui的验证扩展
Jan 09 Javascript
JavaScript中EventLoop介绍
Jan 22 Javascript
antd Upload 文件上传的示例代码
Dec 14 Javascript
Jquery遍历筛选数组的几种方法和遍历解析json对象,Map()方法详解以及数组中查询某值是否存在
Jan 18 jQuery
ES6中的迭代器、Generator函数及Generator函数的异步操作方法
May 12 Javascript
Vue+Element-UI实现上传图片并压缩
Nov 26 Javascript
JS错误处理与调试操作实例分析
Apr 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
在Windows中安装Apache2和PHP4的权威指南
2006/10/09 PHP
php入门学习知识点四 PHP正则表达式基本应用
2011/07/14 PHP
实例介绍PHP的Reflection反射机制
2014/08/05 PHP
php+ajax实现无刷新的新闻留言系统
2020/12/21 PHP
php while循环控制的简单实例
2016/05/30 PHP
PHP  Yii清理缓存的实现方法
2016/11/10 PHP
php解压缩zip和rar压缩包文件的方法
2019/07/10 PHP
thinkPHP框架乐观锁和悲观锁实例分析
2019/10/30 PHP
JQuery下关于$.Ready()的分析
2009/12/13 Javascript
基于Arcgis for javascript实现百度地图ABCD marker的效果
2015/09/12 Javascript
Jquery 效果使用详解
2015/11/23 Javascript
js+html5实现的自由落体运动效果代码
2016/01/28 Javascript
javascript中不易分清的slice,splice和split三个函数
2016/03/29 Javascript
JQuery的Pager分页器实现代码
2016/05/03 Javascript
jQuery实现的无限级下拉菜单功能示例
2016/09/12 Javascript
JavaScript实现公历转农历功能示例
2017/02/13 Javascript
深入理解Vue-cli搭建项目后的目录结构探秘
2017/07/13 Javascript
KOA+egg.js集成kafka消息队列的示例
2018/11/09 Javascript
[31:47]夜魇凡尔赛茶话会 第三期01:选手知多少
2021/03/11 DOTA
python在线编译器的简单原理及简单实现代码
2018/02/02 Python
pandas使用apply多列生成一列数据的实例
2018/11/28 Python
Python基础学习之函数方法实例详解
2019/06/18 Python
python脚本当作Linux中的服务启动实现方法
2019/06/28 Python
python通过http下载文件的方法详解
2019/07/26 Python
Numpy数组array和矩阵matrix转换方法
2019/08/05 Python
python3 BeautifulSoup模块使用字典的方法抓取a标签内的数据示例
2019/11/28 Python
机电专业个人求职信范文
2013/12/30 职场文书
创建精神文明单位实施方案
2014/03/08 职场文书
小学三年级学生评语
2014/04/22 职场文书
仓库管理计划书
2014/05/04 职场文书
个人授权委托书
2014/09/15 职场文书
党员自我评议对照检查材料
2014/09/27 职场文书
扶贫办主任查摆“四风”问题个人对照检查材料思想汇报
2014/10/02 职场文书
院系推荐意见
2015/06/05 职场文书
深度好文:50条没人告诉你的人生经验,句句精辟
2019/08/22 职场文书
MySQL选择合适的备份策略和备份工具
2022/06/01 MySQL