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 相关文章推荐
jquery tools 系列 scrollable学习
Sep 06 Javascript
JS小框架 fly javascript framework
Nov 26 Javascript
利用javascript实现全部删或清空所选的操作
May 27 Javascript
Highcharts入门之简介
Aug 02 Javascript
DOM中事件处理概览与原理的全面解析
Aug 16 Javascript
BootStrap tooltip提示框使用小结
Oct 26 Javascript
浅谈JavaScript异步编程
Jan 20 Javascript
js实现PC端根据IP定位当前城市地理位置
Feb 22 Javascript
javaScript强制保留两位小数的输入数校验和小数保留问题
May 09 Javascript
vue+element-ui动态生成多级表头的方法
Aug 28 Javascript
layui输入框中只允许输入整数的实现方法
Sep 18 Javascript
关于vue利用postcss-pxtorem进行移动端适配的问题
Nov 20 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中flush()、ob_flush()、ob_end_flush()的区别介绍
2013/02/17 PHP
PHP循环遍历数组的3种方法list()、each()和while总结
2014/11/19 PHP
将PHP的session数据存储到数据库中的代码实例
2016/06/24 PHP
关于PHP中字符串与多进制转换函数的实例代码
2016/11/03 PHP
javascript面向对象入门基础详细介绍
2012/09/05 Javascript
在服务端(Page.Write)调用自定义的JS方法详解
2013/08/09 Javascript
js实现touch移动触屏滑动事件
2015/04/17 Javascript
使用HTML+CSS+JS制作简单的网页菜单界面
2015/07/27 Javascript
js实现当鼠标移到表格上时显示这一格全部内容的代码
2016/06/12 Javascript
jQuery 生成svg矢量二维码
2016/08/09 Javascript
JS实现图片上传预览功能
2016/11/21 Javascript
JavaScript实现经典排序算法之冒泡排序
2016/12/28 Javascript
js自制图片放大镜功能
2017/01/24 Javascript
bootstrap table 多选框分页保留示例代码
2017/03/08 Javascript
JS判断微信扫码的方法
2017/08/07 Javascript
vue教程之toast弹框全局调用示例详解
2020/08/24 Javascript
AngularJS select加载数据选中默认值的方法
2018/02/28 Javascript
jQuery实现点击自身以外区域关闭弹出层功能完整示例【改进版】
2018/07/31 jQuery
Vue的路由及路由钩子函数的实现
2019/07/02 Javascript
Python httplib,smtplib使用方法
2008/09/06 Python
python超简单解决约瑟夫环问题
2015/05/12 Python
Python复数属性和方法运算操作示例
2017/07/21 Python
基于python生成器封装的协程类
2019/03/20 Python
django的auth认证,authenticate和装饰器功能详解
2019/07/25 Python
Django中提示消息messages的设置方式
2019/11/15 Python
如何使用canvas绘制可移动网格的示例代码
2020/12/14 HTML / CSS
加拿大建筑和装修专家:Reno-Depot
2017/12/21 全球购物
Made in Design德国:设计师家具、灯具和装饰
2019/10/31 全球购物
SOA面试题:如何在SOA中实现松耦合
2013/07/21 面试题
自主招生自荐信
2013/12/08 职场文书
2014年国庆标语
2014/06/30 职场文书
低碳日宣传活动总结
2014/07/09 职场文书
安全施工责任书
2014/08/25 职场文书
政协会议宣传标语
2014/10/09 职场文书
2014年公务员工作总结
2014/11/18 职场文书
化验员岗位职责
2015/02/14 职场文书