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 相关文章推荐
File文件控件,选中文件(图片,flash,视频)即立即预览显示
Apr 09 Javascript
最短的javascript:地址栏载入脚本代码
Oct 13 Javascript
wap浏览自动跳转到wap页面的js代码
May 17 Javascript
jquery动画效果学习笔记(8种效果)
Nov 13 Javascript
JS弹出对话框实现方法(三种方式)
Dec 18 Javascript
jquery获取文档高度和窗口高度汇总
Jan 25 Javascript
Mongoose学习全面理解(推荐)
Jan 21 Javascript
图文详解Javascript中的上下文和作用域
Feb 15 Javascript
jQuery实现带3D切割效果的轮播图功能示例【附源码下载】
Apr 04 jQuery
vue cli3.0 引入eslint 结合vscode使用
May 27 Javascript
npm qs模块使用详解
Feb 07 Javascript
详解微信小程序入门从这里出发(登录注册、开发工具、文件及结构介绍)
Jul 21 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 Document 代码注释规范
2009/04/13 PHP
一步一步学习PHP(8) php 数组
2010/03/05 PHP
PHP 面向对象详解
2012/09/13 PHP
解析linux下安装memcacheq(mcq)全过程笔记
2013/06/27 PHP
什么是PHP7中的孤儿进程与僵尸进程
2019/04/14 PHP
PHP使用递归按层级查找数据的方法
2019/11/10 PHP
基于JQuery框架的AJAX实例代码
2009/11/03 Javascript
jquery validation插件表单验证的一个例子
2010/03/03 Javascript
IE8 中使用加速器(Activities)
2010/05/14 Javascript
获取div编辑框,textarea,input text的光标位置 兼容IE,FF和Chrome的方法介绍
2012/11/08 Javascript
表单的焦点顺序tabindex和对应enter键提交
2013/01/04 Javascript
javascript对象的使用和属性操作示例详解
2014/03/02 Javascript
javascript实现存储hmtl字符串示例
2014/04/25 Javascript
Node.js中HTTP模块与事件模块详解
2014/11/14 Javascript
jQuery选择器querySelector的使用指南
2015/01/23 Javascript
javascript实现信息增删改查的方法
2015/07/25 Javascript
JavaScript的代码编写格式规范指南
2015/12/07 Javascript
第六章之辅组类与响应式工具
2016/04/25 Javascript
Vue框架中正确引入JS库的方法介绍
2017/07/30 Javascript
原生JS实现自定义下拉单选选择框功能
2018/10/12 Javascript
浅谈webpack+react多页面开发终极架构
2018/11/11 Javascript
Vue切换div显示隐藏,多选,单选代码解析
2020/07/14 Javascript
Python实现115网盘自动下载的方法
2014/09/30 Python
python读写csv文件并增加行列的实例代码
2019/08/01 Python
Python使用PyQt5/PySide2编写一个极简的音乐播放器功能
2020/02/07 Python
Windows下pycharm安装第三方库失败(通用解决方案)
2020/09/17 Python
Python文件操作及内置函数flush原理解析
2020/10/13 Python
PyQt5中QSpinBox计数器的实现
2021/01/18 Python
用纯css3实现的图片放大镜特效效果非常不错
2014/09/02 HTML / CSS
HTML实现代码雨源码及效果示例
2020/02/25 HTML / CSS
广州喜创信息技术有限公司JAVA软件工程师笔试题
2012/10/17 面试题
医院实习介绍信
2014/01/12 职场文书
捐资助学倡议书
2014/04/15 职场文书
沙滩主题婚礼活动策划方案
2014/09/15 职场文书
2019餐饮行业创业计划书!
2019/06/27 职场文书
python开发飞机大战游戏
2021/07/15 Python