JQuery实现文字无缝滚动效果(Marquee插件)
来源:互联网 发布:java 运算符重载 编辑:程序博客网 时间:2024/05/05 23:47
推荐一个JQuery的无缝文字滚动效果,同时也可以滚动图片,也叫做跑马灯效果。
此jquery插件,依托jquery库,能实现各种滚动效果,且让HTML代码符合W3C标准。
官方演示,如下:
Demo
使用方法如下:
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" target="_blank"> WEB前端开发</a> [2011-10-20]</li>
- <li><a href="http://www.bloomylife.com/?cat=154" target="_blank"> 架构设计</a> [2011-09-20]</li>
- <li><a href="http://www.bloomylife.com/?cat=157" 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
0 0
- JQuery实现文字无缝滚动效果(Marquee插件)
- JQuery实现文字无缝滚动效果(Marquee插件)
- JQuery实现文字无缝滚动效果(Marquee插件)
- JQuery Marquee插件(无缝滚动效果)- marquee.js
- marquee实现文字滚动效果
- jquery marquee 无缝滚动
- marquee实现无缝滚动
- marquee图片/文字无缝滚动
- Marquee实现文字走马灯滚动效果
- 一个文字无缝滚动的jQuery插件
- marquee标签实现跑马灯效果--无缝滚动
- marquee标签实现跑马灯效果--无缝滚动
- xMarquee jquery实现文字水平无缝滚动
- marquee实现文字滚动
- jquery 文字无缝滚动
- 文字无缝滚动jQuery上下滚动js效果代码
- jquery插件jCarouselLite实现图片无缝滚动
- html之marquee实现图片文字滚动效果详解
- IntentFilter Action Data category属性
- IOS App资源路径
- Eclipse配置Tomcat
- spring mvc 一个controlller对应一个请求
- 类和对象的基础知识
- JQuery实现文字无缝滚动效果(Marquee插件)
- C++中delete和delete[]的区别
- 剑指Offer24二叉搜索树的后序遍历序列+扩展线序遍历序列
- C#获取日期段数组
- hdu-2647 Reward
- Android之高仿微信“启动画面”(一)
- java程序员在面试时要注意的几个问题
- poj2242(圆的周长)
- hdoj.1420 Prepared for New Acmer 20140825