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验证工具类搜集整理
Jan 16 Javascript
利用jQuery简单实现产品展示图片左右滚动功能(示例代码)
Jan 02 Javascript
javascript避免数字计算精度误差的方法详解
Mar 05 Javascript
jquery trigger伪造a标签的click事件取代window.open方法
Jun 23 Javascript
js插件设置innerHTML时在IE8下提示“未知运行时错误”解决方法
Apr 25 Javascript
利用jQuery实现WordPress中@的ID悬浮显示评论内容
Dec 11 Javascript
JavaScript实现实时更新系统时间的实例代码
Apr 04 Javascript
element-ui使用导航栏跳转路由的用法详解
Aug 22 Javascript
jquery分页插件pagination使用教程
Oct 23 jQuery
微信公众号H5支付接口调用方法
Jan 10 Javascript
Layui表格监听行单双击事件讲解
Nov 14 Javascript
javascript实现前端分页效果
Jun 24 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将向Java靠拢
2006/10/09 PHP
php中文件上传的安全问题
2006/10/09 PHP
php 获取完整url地址
2008/12/20 PHP
提高PHP编程效率的53个要点(经验小结)
2010/09/04 PHP
php编程实现获取excel文档内容的代码实例
2011/06/28 PHP
php处理斐波那契数列非递归方法
2012/02/04 PHP
浅谈php冒泡排序
2014/12/30 PHP
laravel 配置路由 api和web定义的路由的区别详解
2019/09/03 PHP
IE和Firefox下event事件杂谈
2009/12/18 Javascript
js Form.elements[i]的使用实例
2011/11/13 Javascript
JS获得QQ号码的昵称,头像,生日的简单实例
2013/12/04 Javascript
JQuery判断HTML元素是否存在的两种解决方法
2013/12/26 Javascript
js实现touch移动触屏滑动事件
2015/04/17 Javascript
javascript HTML5文件上传FileReader API
2020/03/27 Javascript
jQuery Ajax Post 回调函数不执行问题的解决方法
2016/08/15 Javascript
canvas的神奇用法
2017/02/03 Javascript
JavaScript实现鼠标点击导航栏变色特效
2017/02/08 Javascript
微信小程序实现实时圆形进度条的方法示例
2017/02/24 Javascript
用vue和node写的简易购物车实现
2017/04/25 Javascript
Angular.js中window.onload(),$(document).ready()的写法浅析
2017/09/28 Javascript
在Vue中使用Compass的方法
2018/03/02 Javascript
axios 处理 302 状态码的解决方法
2018/04/10 Javascript
JS实现面向对象继承的5种方式分析
2018/07/21 Javascript
vue-cli配置全局sass、less变量的方法
2019/06/06 Javascript
layer弹出层自定义提交取消按钮的例子
2019/09/10 Javascript
理解Proxy及使用Proxy实现vue数据双向绑定操作
2020/07/18 Javascript
[08:07]DOTA2每周TOP10 精彩击杀集锦vol.8
2014/06/25 DOTA
python发送邮件功能实现代码
2016/07/15 Python
Python 12306抢火车票脚本
2018/02/07 Python
python3.6实现学生信息管理系统
2019/02/21 Python
python图像处理模块Pillow的学习详解
2019/10/09 Python
HTML5学习笔记之html5与传统html区别
2016/01/06 HTML / CSS
佳能加拿大网上商店:Canon eStore Canada
2018/04/04 全球购物
党支部三严三实对照检查材料思想汇报
2014/09/29 职场文书
python 如何在list中找Topk的数值和索引
2021/05/20 Python
python随机打印成绩排名表
2021/06/23 Python