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 相关文章推荐
一些mootools的学习资源
Feb 07 Javascript
避免 showModalDialog 弹出新窗体的原因分析
May 31 Javascript
javascript之Partial Application学习
Jan 10 Javascript
JQuery调用绑定click事件的3种写法
Mar 28 Javascript
微信小程序中的swiper组件详解
Apr 14 Javascript
使用socket.io实现简单聊天室案例
Jan 02 Javascript
深入浅析JS中的严格模式
Jun 04 Javascript
Vue实现todolist删除功能
Jun 26 Javascript
angularjs中判断ng-repeat是否迭代完的实例
Sep 12 Javascript
vue回到顶部监听滚动事件详解
Aug 02 Javascript
高效jQuery选择器的5个技巧实例分析
Nov 26 jQuery
JavaScript console的使用方法实例分析
Apr 28 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加MYSQL服务器
2006/10/09 PHP
php array_merge下进行数组合并的代码
2008/07/22 PHP
php面向对象全攻略 (一) 面向对象基础知识
2009/09/30 PHP
通用PHP动态生成静态HTML网页的代码
2010/03/04 PHP
注意:php5.4删除了session_unregister函数
2013/08/05 PHP
PHP 读取文本文件内容并分页显示
2016/01/02 PHP
PHP使用Curl实现模拟登录及抓取数据功能示例
2018/04/27 PHP
window.showModalDialog使用手册
2007/01/11 Javascript
Javascript 更新 JavaScript 数组的 uniq 方法
2008/01/23 Javascript
javascript得到XML某节点的子节点个数的脚本
2008/10/11 Javascript
javascript 哈希表(hashtable)的简单实现
2010/01/20 Javascript
统计出现最多的字符次数的js代码
2010/12/03 Javascript
js将字符串转成正则表达式的实现方法
2013/11/13 Javascript
javaScript如何处理从java后台返回的list
2014/04/24 Javascript
JavaScript修改作用域外变量的方法
2016/03/25 Javascript
JS作用域闭包、预解释和this关键字综合实例解析
2016/12/16 Javascript
js时间戳与日期格式之间转换详解
2017/12/11 Javascript
ES6之Proxy的get方法详解
2019/10/11 Javascript
Vue实现星级评价效果实例详解
2019/12/30 Javascript
微信小程序仿抖音短视频切换效果的实例代码
2020/06/24 Javascript
深度解读vue-resize的具体用法
2020/07/08 Javascript
python的paramiko模块实现远程控制和传输示例
2017/10/13 Python
DataFrame 将某列数据转为数组的方法
2018/04/13 Python
Python运维之获取系统CPU信息的实现方法
2018/06/11 Python
tensorflow 用矩阵运算替换for循环 用tf.tile而不写for的方法
2018/07/27 Python
对python3标准库httpclient的使用详解
2018/12/18 Python
python多线程共享变量的使用和效率方法
2019/07/16 Python
使用Python代码实现Linux中的ls遍历目录命令的实例代码
2019/09/07 Python
在win64上使用bypy进行百度网盘文件上传功能
2020/01/02 Python
给民警的表扬信
2014/01/08 职场文书
企业法人代表任命书
2014/06/06 职场文书
美术课外活动总结
2014/07/08 职场文书
优秀毕业生的求职信
2014/07/21 职场文书
思想作风整顿个人剖析材料
2014/10/06 职场文书
2016年党员承诺书范文
2016/03/24 职场文书
python 经纬度求两点距离、三点面积操作
2021/06/03 Python