<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 无缝滚动插件的更多相关文章

  1. 精心挑选10款优秀的 jQuery 图片左右滚动插件

    在现代的网页设计中,图片和内容滑块是一种极为常见和重要的元素.你可以从头开始编写自己的滑动效果,但是这将浪费很多时间,因为网络上已经有众多的优秀的 jQuery 滑块插件.当然,如果要从大量的 jQu ...

  2. jQuery kxbdMarquee 无缝滚动

    转:http://code.ciaoca.com/jquery/kxbdmarquee/ <marquee> 曾是 IE 下独有的一个走马灯效果的标签,其他浏览器并不兼容,于是出现了使用 ...

  3. jquery图片无缝滚动代码左右 上下无缝滚动图片

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. liMarquee – jQuery无缝滚动插件(制作跑马灯效果)

    liMarquee 是一款基于 jQuery 的无缝滚动插件,类似于 HTML 的 marquee 标签,但比 marquee 更强大.它可以应用于任何 Web 元素,包括文字.图像.表格.表单等元素 ...

  5. jQuery图片无缝滚动JS代码ul/li结构

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. jQuery图片无缝滚动

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. 利用jQuery无缝滚动插件liMarquee实现图片(链接)和文字(链接)向右无缝滚动(兼容ie7+)

    像新闻类的版块经常要求一条条的新闻滚动出现,要实现这种效果,可以使用jQuery无缝滚动插件liMarquee. 注意: 1. 它的兼容性是IE7+,及现代浏览器. 2. 引用的jquery的版本最好 ...

  8. Infinite Scroll - jQuery & WP 无限滚动插件

    无限滚动(Infinite Scroll)也称为自动分页.滚动分页和无限分页.常用在图片.文章或其它列表形式的网页中,用来在滚动网页的时候自动加载下一页的内容.Infinite Scroll  这款  ...

  9. 手写JS无缝滚动插件

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...

随机推荐

  1. Entity Framework 程序设计入门二 对数据进行CRUD操作和查询

    前一篇文章介绍了应用LLBL Gen生成Entity Framework所需要的类型定义,用一行代码完成数据资料的读取, <LLBL Gen + Entity Framework 程序设计入门& ...

  2. 使用supervisor提高nodejs调试效率

    如果你有PHP 开发经验,会习惯在修改PHP 脚本后直接刷新浏览器以观察结果,而你 在开发Node.js 实现的HTTP 应用时会发现,无论你修改了代码的哪一部份,都必须终止 Node.js 再重新运 ...

  3. Android入门(十一)SQLite CURD

    原文链接:http://www.orlion.ga/594/ 一.添加数据 SQLiteOpenHelper的getReadableDatabase()或getWritableDatabase()方法 ...

  4. Docker - Docker基础命令及使用

    Docker Docker - 官网 Docker - Hub GitHub - Docker Docker中文社区 Docker基础命令 Docker 查看帮助信息:docker --help 查看 ...

  5. iOS_UIImage_Gif的分解

    /** Gif的步骤 1. 拿到Gifd的数据 2. 将Gif分解为一帧帧 3. 将单帧数据转为UIImage 4. 单帧图片保存 */ github地址: https://github.com/ma ...

  6. Android 2.x中使用actionbar - Actionbarsherlock

    1. 范例说明 从Android 3.0开始,Android引入了ActoinBar,不得不说3.0之前android的标题栏确实比较丑,并且还没有任何功能. 之前很多应用的顶部栏很多都是仿苹果的,比 ...

  7. Azure REST API (2) Azure Storage

    <Windows Azure Platform 系列文章目录> 注意:本文适用于国内由世纪互联运维的Azure China. 本文将会介绍如何使用REST API来直接访问Storage ...

  8. Azure Redis Cache (3) 创建和使用P级别的Redis Cache

    <Windows Azure Platform 系列文章目录> 在笔者之前的文档里面已经说明了,Azure Redis Cache分为三个不同的级别: - 基本,Basic,不包含SLA ...

  9. Google C++ 风格指南 命名约定 转

    命名约定 最重要的一致性规则是命名管理. 命名风格快速获知名字代表是什么东东: 类型? 变量? 函数? 常量? 宏 ... ? 甚至不需要去查找类型声明. 我们大脑中的模式匹配引擎可以非常可靠的处理这 ...

  10. 三、BLE(上)

    1.      BLE 1.1       模块构成与结构体层次关系 如上图所示,BLE模块有独立的application layer,这是因为该模块可以直接从BlueCore接收数据(通过GATT模 ...