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 相关文章推荐
js检测判断日期大于多少天的方法
May 04 Javascript
利用jQuery设计一个简单的web音乐播放器的实例分享
Mar 08 Javascript
基于Bootstrap重置输入框内容按钮插件
May 12 Javascript
微信小程序 Flex布局详解
Oct 09 Javascript
jQuery Ajax 实现分页 kkpager插件实例代码
Aug 10 jQuery
JSON创建键值对(key是中文或者数字)方式详解
Aug 24 Javascript
ES6使用Set数据结构实现数组的交集、并集、差集功能示例
Oct 31 Javascript
layer.open 按钮的点击事件关闭方法
Aug 17 Javascript
vue组件中iview的modal组件爬坑问题之modal的显示与否应该是使用v-show
Apr 12 Javascript
Vue项目路由刷新的实现代码
Apr 17 Javascript
js实现图片上传到服务器和回显
Jan 19 Javascript
js实现可爱的气泡特效
Sep 05 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函数,php爱好者站推荐
2007/03/19 PHP
PHP使用array_fill定义多维数组的方法
2015/03/18 PHP
thinkPHP的表达式查询用法详解
2016/09/14 PHP
php array_slice 取出数组中的一段序列实例
2016/11/04 PHP
php使用include 和require引入文件的区别
2017/02/16 PHP
微信公众号实现会员卡领取功能
2017/06/08 PHP
javascript qq右下角滑出窗口 sheyMsg
2010/03/21 Javascript
jquery操作checked属性以及disabled属性的多种方法
2014/06/20 Javascript
搭建pomelo 开发环境
2014/06/24 Javascript
javascript检测是否联网的实现代码
2014/09/28 Javascript
jquery实现无限分级横向导航菜单的方法
2015/03/12 Javascript
jQuery实现带有洗牌效果的动画分页实例
2015/08/31 Javascript
详解百度百科目录导航树小插件
2017/01/08 Javascript
使用nodejs下载风景壁纸
2017/02/05 NodeJs
JavaScript省市级联下拉菜单实例
2017/02/14 Javascript
jQuery给表格添加分页效果
2017/03/02 Javascript
BootStrap给table表格的每一行添加一个按钮事件
2017/09/07 Javascript
JS实现的找零张数最小问题示例
2017/11/28 Javascript
vue 的 solt 子组件过滤过程解析
2019/09/07 Javascript
JavaScript数值类型知识汇总
2019/11/17 Javascript
Python处理PDF及生成多层PDF实例代码
2017/04/24 Python
django+js+ajax实现刷新页面的方法
2017/05/22 Python
python简单线程和协程学习心得(分享)
2017/06/14 Python
Python 判断是否为质数或素数的实例
2017/10/30 Python
对Python Pexpect 模块的使用说明详解
2019/02/14 Python
Python迭代器iterator生成器generator使用解析
2019/10/24 Python
基于h5py的使用及数据封装代码
2019/12/26 Python
深入浅析HTML5中的SVG
2015/11/27 HTML / CSS
网站域名和主机:Domain.com
2019/04/01 全球购物
在校生汽车维修实习自我鉴定
2013/09/19 职场文书
结婚喜宴家长答谢词
2014/01/15 职场文书
仓库管理制度
2014/01/21 职场文书
经济管理自荐书
2014/06/09 职场文书
医院中层管理人员培训心得体会
2016/01/11 职场文书
Python生成九宫格图片的示例代码
2021/04/14 Python
超外差式晶体管收音机的组装与统调
2021/04/22 无线电