JQuery实现文字无缝滚动效果示例代码(Marquee插件)


Posted in Javascript onMarch 07, 2017

推荐一个JQuery的无缝文字滚动效果,同时也可以滚动图片,也叫做跑马灯效果。

此jquery插件,依托jquery库,能实现各种滚动效果,且让HTML代码符合W3C标准。

使用方法如下:

1、加载javascript。

<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript" src="js/jquery.marquee.js"></script> 
<script type="text/javascript"> 
$(function(){   
$("#marquee").marquee({yScroll: "bottom"}); 
}); 
</script>

2、加入CSS样式。

ul.marquee {display: block;line-height: 1;position: relative;overflow: hidden;width: 400px; height: 22px; } 
ul.marquee li {position: absolute; top: -999em;left: 0;display: block; white-space: nowrap; padding: 3px 5px; text-indent:0.8em;}

3、HTML代码如下:

<ul id="marquee" >    
<li><a href="http://www.bloomylife.com/?cat=153" rel="external nofollow" target="_blank"> WEB前端开发</a> [2011-10-20]</li>    
<li><a href="http://www.bloomylife.com/?cat=154" rel="external nofollow" target="_blank"> 架构设计</a> [2011-09-20]</li>    
<li><a href="http://www.bloomylife.com/?cat=157" rel="external nofollow" target="_blank"> 系统运维</a> [2011-10-16]</li>   
</ul>

该插件提供了许多属性选项,您可以配置定制外观和效果。

{      
 yScroll: "top"    // 初始滚动方向 (还可以是"top" 或 "bottom")     
 showSpeed: 850    // 初始下拉速度     
 scrollSpeed: 12    // 滚动速度     
 pauseSpeed: 5000   // 滚动完到下一条的间隔时间     
 pauseOnHover: true  // 鼠标滑向文字时是否停止滚动     
 loop: -1       // 设置循环滚动次数 (-1为无限循环)     
 fxEasingShow: "swing" // 缓冲效果     
 fxEasingScroll: "linear" // 缓冲效果     
 cssShowing: "marquee-showing" //定义class      // 
 event handlers     
 init: null        // 初始调用函数     
 beforeshow: null      // 滚动前回调函数     
 show: null         // 当新的滚动内容显示时回调函数     
 aftershow: null      // 滚动完了回调函数 
}

jquery.marquee.js可以到官网地址下载:http://www.givainc.com/labs/marquee_jquery_plugin.htm

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
在Ubuntu上安装最新版本的Node.js
Jul 14 Javascript
jQuery实现文本框输入同步的方法
Jun 20 Javascript
AngularJS中监视Scope变量以及外部调用Scope方法
Jan 23 Javascript
jquery实现全选、不选、反选的两种方法
Sep 06 Javascript
关于Iframe父页面与子页面之间的相互调用
Nov 22 Javascript
浅谈JS中的反柯里化( uncurrying)
Aug 17 Javascript
javascript实现文件拖拽事件
Mar 29 Javascript
clipboard.js在移动端复制失败的解决方法
Jun 13 Javascript
JS中数组与对象的遍历方法实例小结
Aug 14 Javascript
基于JavaScript实现一个简单的Vue
Sep 26 Javascript
解决JQuery的ajax函数执行失败alert函数弹框一闪而过问题
Apr 10 jQuery
解决layer.confirm选择完之后消息框不消失的问题
Sep 16 Javascript
JavaScript实现向select下拉框中添加和删除元素的方法
Mar 07 #Javascript
js仿网易表单及时验证功能
Mar 07 #Javascript
JS完成画圆圈的小球
Mar 07 #Javascript
jQuery Chosen通用初始化
Mar 07 #Javascript
jQuery动态移除和添加背景图片的方法详解
Mar 07 #Javascript
jQuery中Chosen三级联动功能实例代码
Mar 07 #Javascript
jQuery基于事件控制实现点击显示内容下拉效果
Mar 07 #Javascript
You might like
收集的PHP中与数组相关的函数
2007/03/22 PHP
php实现的遍历文件夹下所有文件,编辑删除
2010/01/05 PHP
Laravel框架处理用户的请求操作详解
2019/12/20 PHP
xheditor与validate插件冲突的解决方案
2010/04/15 Javascript
利用google提供的API(JavaScript接口)获取网站访问者IP地理位置的代码详解
2010/07/24 Javascript
让textarea自动调整大小的js代码
2011/04/12 Javascript
5个最佳的Javascript日期处理类库分享
2012/04/15 Javascript
给jQuery方法添加回调函数一款插件的应用
2013/01/21 Javascript
css样式标签和js语法属性区别
2013/11/06 Javascript
jQuery实现延迟跳转的方法
2015/06/05 Javascript
在localStorage中存储对象数组并读取的方法
2016/09/24 Javascript
bootstrap datetimepicker2.3.11时间插件使用
2016/11/19 Javascript
浅谈JS中的反柯里化( uncurrying)
2017/08/17 Javascript
JS运动改变单物体透明度的方法分析
2018/01/23 Javascript
JS实现面向对象继承的5种方式分析
2018/07/21 Javascript
浅谈angularJS2中的界面跳转方法
2018/08/31 Javascript
在vue项目实现一个ctrl+f的搜索功能
2020/02/28 Javascript
[05:56]第十六期——新进3大C之小兔基
2014/06/24 DOTA
python使用正则搜索字符串或文件中的浮点数代码实例
2014/07/11 Python
Python中线程编程之threading模块的使用详解
2015/06/23 Python
python实现JAVA源代码从ANSI到UTF-8的批量转换方法
2015/08/10 Python
浅谈python中字典append 到list 后值的改变问题
2018/05/04 Python
python如何爬取个性签名
2018/06/19 Python
Selenium鼠标与键盘事件常用操作方法示例
2018/08/13 Python
对Pytorch中Tensor的各种池化操作解析
2020/01/03 Python
英语专业应届生求职信范文
2013/11/15 职场文书
物理力学求职信
2014/02/18 职场文书
安全生产网格化管理实施方案
2014/03/01 职场文书
演讲主持词
2014/03/18 职场文书
单位法人授权委托书范本
2014/10/09 职场文书
小学三八妇女节活动总结
2015/02/06 职场文书
老员工辞职信范文
2015/05/12 职场文书
2015年出纳工作总结与计划
2015/05/18 职场文书
不要在HTML中滥用div
2021/05/08 HTML / CSS
Java工作中实用的代码优化技巧分享
2022/04/21 Java/Android
Golang实现可重入锁的示例代码
2022/05/25 Golang