一款经典的jQuery kxbdMarquee 无缝滚动插件
<marquee> 曾是 IE 下独有的一个走马灯效果的标签,其他浏览器并不兼容,于是出现了使用 JavaScript 来模拟该效果的插件。
- 版本:
jQuery v1.3.2+
在线实例
实例预览 kxbdMarquee 模拟 Marquee 无缝滚动
使用方法
载入 JavaScript 文件
<script src="jquery.js"></script><script src="jquery.kxbdmarquee.js"></script>
CSS 样式
/*** 父容器需要设置溢出隐藏* 如果是水平滚动,项目需要设置浮动*/#element_id{overflow:hidden;}#element_id ul li{float:left;}
DOM 结构
<div id="element_id"><ul><li>...</li><li>...</li><li>...</li></ul></div>
JavaScript 调用方式
- $('#element_id').kxbdMarquee();
参数说明
| 名称 | 默认值 | 说明 |
|---|---|---|
| direction | "left" | 滚动方向。可设置为:"left", "right", "up", "down" |
| isEqual | true | 所有滚动的元素长宽是否相等。可设置为:true, false |
| loop | 0 | 循环滚动次数,0 表示无限循环 |
| scrollAmount | 1 | 步长(px) |
| scrollDelay | 20 | 时长(ms) |
一款经典的jQuery kxbdMarquee 无缝滚动插件的更多相关文章
- 精心挑选10款优秀的 jQuery 图片左右滚动插件
在现代的网页设计中,图片和内容滑块是一种极为常见和重要的元素.你可以从头开始编写自己的滑动效果,但是这将浪费很多时间,因为网络上已经有众多的优秀的 jQuery 滑块插件.当然,如果要从大量的 jQu ...
- jQuery kxbdMarquee 无缝滚动
转:http://code.ciaoca.com/jquery/kxbdmarquee/ <marquee> 曾是 IE 下独有的一个走马灯效果的标签,其他浏览器并不兼容,于是出现了使用 ...
- jquery图片无缝滚动代码左右 上下无缝滚动图片
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- liMarquee – jQuery无缝滚动插件(制作跑马灯效果)
liMarquee 是一款基于 jQuery 的无缝滚动插件,类似于 HTML 的 marquee 标签,但比 marquee 更强大.它可以应用于任何 Web 元素,包括文字.图像.表格.表单等元素 ...
- jQuery图片无缝滚动JS代码ul/li结构
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jQuery图片无缝滚动
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 利用jQuery无缝滚动插件liMarquee实现图片(链接)和文字(链接)向右无缝滚动(兼容ie7+)
像新闻类的版块经常要求一条条的新闻滚动出现,要实现这种效果,可以使用jQuery无缝滚动插件liMarquee. 注意: 1. 它的兼容性是IE7+,及现代浏览器. 2. 引用的jquery的版本最好 ...
- Infinite Scroll - jQuery & WP 无限滚动插件
无限滚动(Infinite Scroll)也称为自动分页.滚动分页和无限分页.常用在图片.文章或其它列表形式的网页中,用来在滚动网页的时候自动加载下一页的内容.Infinite Scroll 这款 ...
- 手写JS无缝滚动插件
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8&qu ...
随机推荐
- iOS $299刀企业证书申请的过程以及细节补充(二)
上篇博客写的过程中,没有图,也没有相应的说明.这次再补充一些信息: 1.从 https://developer.apple.com/ios/enroll/dunsLookupForm.action 申 ...
- Angularjs中link函数参数含义小节
restrictE: 表示该directive仅能以element方式使用,即:<my-dialog></my-dialog>A: 表示该directive仅能以attribu ...
- JSON.stringify转换Date不正确的解決方法
JSON.stringify转换Date不正确的原因:国际时区(UTC)和中国时区(GMT)的原因,东八区+8等于国际时区. 解决方法,重新Es5的Date.prototype.toJSON方法,代码 ...
- 【知识积累】DES算法之C#加密&Java解密
一.前言 在项目需要添加安全模块,客户端调用服务端发布的service必须要经过验证,加密算法采用DES,客户端采用C#进行加密,服务端使用Java进行解密.废话不多说,直接上代码. 二.客户端 客户 ...
- 报告一个IE很奇葩的滚动条问题——百分比计算宽度为浮点数时的滚动条显示异常
起因: 做项目的时候做了一个表格内容超过DIV容器自动横向滚动处理.别的浏览器都正常:但是在IE下面明明表格table和容器DIV宽度一致但是却出现了滚动条.如图 然后本人做实验找了半天原因终于是找到 ...
- C# 控制台或者winform程序开启http的监听状态
1 public class THttpListener { HttpListener listerner; /// <summary> /// /// </summary> ...
- 如何安装RHEL7.2x64 即红帽7.2虚拟机?
虚拟机RHEL7.2x64的安装步骤 第一步:创建虚拟机 第二步:典型安装下一步: 第三步:创建空的硬 ...
- 【Android】你应该知道的调试神器----adb
最近跟着一个前辈在做TV应用,因为不能通过usb连接调试,接触到了adb,突然间觉得自己似乎发现了另外一个世界,借助adb shell命令对应用进行调试,简直方便得不行.更重要的是,这是命令行操作啊! ...
- 搭建 Hexo Blog
一.教程参考:https://xuanwo.org/2015/03/26/hexo-intor/ 二.命令总结 1.node -v.npm -v:查看 node.js 是否安装成功 2.npm ins ...
- C#深入.NET平台的软件系统分层开发
今天我们来讲讲分层开发,你从标题能不能简单的认识一下什么是分层呢? 不懂也没关系,接下来我来给你讲讲. 第一章 软件系统的分层开发 (1)其实分层模式可以这样定义:将解决方案中功能不同的模块分到不同的 ...