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之WEB开发调试利器:Firebug 下载
Jan 13 Javascript
基于jquery的表格排序
Sep 11 Javascript
jQuery Form 页面表单提交的小例子
Nov 15 Javascript
JavaScript学习心得之概述
Jan 20 Javascript
jquery中attr和prop的区别分析
Mar 16 Javascript
AngularJs表单验证实例代码解析
Nov 29 Javascript
详解如何在React组件“外”使用父组件的Props
Jan 12 Javascript
vue实现简单的MVVM框架
Aug 05 Javascript
一文了解Vue中的nextTick
May 06 Javascript
解决layer.confirm选择完之后消息框不消失的问题
Sep 16 Javascript
layui上传图片到服务器的非项目目录下的方法
Sep 26 Javascript
vue项目中在可编辑div光标位置插入内容的实现代码
Jan 07 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
如何用phpmyadmin设置mysql数据库用户的权限
2012/01/09 PHP
php求两个目录的相对路径示例(php获取相对路径)
2014/03/27 PHP
PHP独立Session数据库存储操作类分享
2014/06/11 PHP
解析WordPress中的post_class与get_post_class函数
2016/01/04 PHP
详解PHP 7.4 中数组延展操作符语法知识点
2019/07/19 PHP
Laravel 对某一列进行筛选然后求和sum()的例子
2019/10/10 PHP
Laravel5.1 框架响应基本用法实例分析
2020/01/04 PHP
js textarea自动增高并隐藏滚动条
2009/12/16 Javascript
jquery toolbar与网页浮动工具条具体实现代码
2014/01/12 Javascript
javascript操作excel生成报表全攻略
2014/05/04 Javascript
jquery获得当前html页面源码的方法
2015/07/14 Javascript
jquery.mousewheel实现整屏翻屏效果
2015/08/30 Javascript
详解Node.js中的事件机制
2016/09/22 Javascript
Bootstrap源码解读排版(1)
2016/12/23 Javascript
Javascript中的作用域及块级作用域
2017/12/08 Javascript
详解vue渲染函数render的使用
2017/12/12 Javascript
jQuery实现的电子时钟效果完整示例
2018/04/28 jQuery
详解Vue实战指南之依赖注入(provide/inject)
2018/11/13 Javascript
uploadify插件实现多个图片上传并预览
2019/09/30 Javascript
python里大整数相乘相关技巧指南
2014/09/12 Python
python创建和删除目录的方法
2015/04/29 Python
Python抓取框架Scrapy爬虫入门:页面提取
2017/12/01 Python
python文件转为exe文件的方法及用法详解
2019/07/08 Python
python jenkins 打包构建代码的示例代码
2019/11/29 Python
Python 解析简单的XML数据
2020/07/24 Python
python中append函数用法讲解
2020/12/11 Python
美国办公用品购物网站:Quill.com
2016/09/01 全球购物
毕业生就业推荐信范文
2013/12/01 职场文书
教师实习自我鉴定
2013/12/18 职场文书
高中毕业生的个人自我评价
2014/02/21 职场文书
图书馆志愿者活动总结
2014/06/27 职场文书
2014年民政局关于保密工作整改措施
2014/09/19 职场文书
环境卫生工作汇报材料
2014/10/28 职场文书
2014年乡镇纪委工作总结
2014/12/19 职场文书
初中语文教师研修日志
2015/11/13 职场文书
python疲劳驾驶困倦低头检测功能的实现
2022/04/04 Python