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 相关文章推荐
jquery中常用的SET和GET
Jan 13 Javascript
jquery内置验证(validate)使用方法示例(表单验证)
Dec 04 Javascript
js清理Word格式示例代码
Feb 13 Javascript
jQuery+ajax实现动态执行脚本的方法
Jan 27 Javascript
分享自己用JS做的扫雷小游戏
Feb 17 Javascript
浅谈jquery的html方法里包含特殊字符的处理
Nov 30 Javascript
JavaScript中String对象的方法介绍
Jan 04 Javascript
jQuery简单绑定单个事件的方法示例
Jun 10 jQuery
详解Angular Reactive Form 表单验证
Jul 06 Javascript
Vue.js2.0中的变化小结
Oct 24 Javascript
Vue组件化开发思考
Feb 02 Javascript
Bootstrap table 服务器端分页功能实现方法示例
Jun 01 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实现图片上传的方法
2016/01/22 PHP
php版微信返回用户text输入的方法
2016/11/14 PHP
PHP实现模拟http请求的方法分析
2017/12/20 PHP
JavaScript中的this实例分析
2011/04/28 Javascript
javascipt基础内容--需要注意的细节
2013/04/10 Javascript
深入分析escape()、encodeURI()、encodeURIComponent()的区别及示例
2014/08/04 Javascript
jQuery简单实现禁用右键菜单
2015/03/10 Javascript
基于javascript代码检测访问网页的浏览器呈现引擎、平台、Windows操作系统、移动设备和游戏系统
2015/12/03 Javascript
js实现input密码框提示信息的方法(附html5实现方法)
2016/01/14 Javascript
js只执行1次的函数示例
2016/07/20 Javascript
Bootstrap精简教程中秋大放送
2016/09/15 Javascript
HTML5 JS压缩图片并获取图片BASE64编码上传
2020/11/16 Javascript
Angular2 父子组件通信方式的示例
2018/01/29 Javascript
在node中使用jwt签发与验证token的方法
2019/04/03 Javascript
vue下载excel的实现代码后台用post方法
2019/05/10 Javascript
vue视图不更新情况详解
2019/05/16 Javascript
VUE使用 wx-open-launch-app 组件开发微信打开APP功能
2020/08/11 Javascript
原生JavaScript实现换肤
2021/02/19 Javascript
Python实现远程调用MetaSploit的方法
2014/08/22 Python
Python numpy 提取矩阵的某一行或某一列的实例
2018/04/03 Python
用Python实现数据的透视表的方法
2018/11/16 Python
在Python中获取操作系统的进程信息
2019/08/27 Python
pygame实现俄罗斯方块游戏(基础篇2)
2019/10/29 Python
Tensorflow tf.nn.depthwise_conv2d如何实现深度卷积的
2020/04/20 Python
python利用蒙版抠图(使用PIL.Image和cv2)输出透明背景图
2020/08/04 Python
澳大利亚和新西兰最大的在线旅行社之一:Aunt Betty
2019/08/07 全球购物
美国户外服装和装备购物网站:Outland USA
2020/03/22 全球购物
Bath & Body Works阿联酋:在线购买沐浴和身体用品
2021/02/27 全球购物
中考冲刺决心书
2014/03/11 职场文书
法定代表人授权委托书范文
2014/08/02 职场文书
大学毕业谢师宴致辞
2015/07/27 职场文书
2016年“5.12”护士节致辞
2015/07/31 职场文书
《开国大典》教学反思
2016/02/16 职场文书
《丑小鸭》教学反思
2016/02/19 职场文书
python学习之panda数据分析核心支持库
2021/05/07 Python
浅谈Python类的单继承相关知识
2021/05/12 Python