码迷,mamicode.com
首页 > Web开发 > 详细

一款经典的jQuery kxbdMarquee 无缝滚动插件

时间:2016-08-02 08:52:28      阅读:229      评论:0      收藏:0      [点我收藏+]

标签:

<marquee> 曾是 IE 下独有的一个走马灯效果的标签,其他浏览器并不兼容,于是出现了使用 JavaScript 来模拟该效果的插件。

  • 版本:
  • jQuery v1.3.2+

在线实例

实例预览 kxbdMarquee 模拟 Marquee 无缝滚动

使用方法

载入 JavaScript 文件

  1. <script src="jquery.js"></script> 
  2. <script src="jquery.kxbdmarquee.js"></script> 
复制

CSS 样式

  1. /** 
  2.  * 父容器需要设置溢出隐藏 
  3.  * 如果是水平滚动,项目需要设置浮动 
  4.  */ 
  5. #element_id{overflow:hidden;} 
  6. #element_id ul li{float:left;} 
复制

DOM 结构

  1. <div id="element_id"> 
  2.   <ul> 
  3.     <li>...</li> 
  4.     <li>...</li> 
  5.     <li>...</li> 
  6.   </ul> 
  7. </div>
复制

JavaScript 调用方式

  1. $(‘#element_id‘).kxbdMarquee();
复制

参数说明

名称默认值说明
direction "left" 滚动方向。可设置为:"left", "right", "up", "down"
isEqual true 所有滚动的元素长宽是否相等。可设置为:true, false
loop 0 循环滚动次数,0 表示无限循环
scrollAmount 1 步长(px)
scrollDelay 20 时长(ms)

 

一款经典的jQuery kxbdMarquee 无缝滚动插件

标签:

原文地址:http://www.cnblogs.com/niuboren/p/5727953.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!