jQuery kxbdMarquee 无缝滚动
转:http://code.ciaoca.com/jquery/kxbdmarquee/
<marquee> 曾是 IE 下独有的一个走马灯效果的标签,其他浏览器并不兼容,于是出现了使用 JavaScript 来模拟该效果的插件。
载入 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();
$("#element_id").kxbdMarquee({direction:"up",isEqual:false});
参数说明
| 名称 | 默认值 | 说明 |
|---|---|---|
| direction | "left" | 滚动方向。可设置为:"left", "right", "up", "down" |
| isEqual | true | 所有滚动的元素长宽是否相等。可设置为:true, false |
| loop | 0 | 循环滚动次数,0 表示无限循环 |
| scrollAmount | 1 | 步长(px) |
| scrollDelay | 20 | 时长(ms) |
我的效果图

jQuery kxbdMarquee 无缝滚动的更多相关文章
- 一款经典的jQuery kxbdMarquee 无缝滚动插件
<marquee> 曾是 IE 下独有的一个走马灯效果的标签,其他浏览器并不兼容,于是出现了使用 JavaScript 来模拟该效果的插件. 版本: jQuery v1.3.2+ 在线实例 ...
- 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图片无缝滚动代码左右 上下无缝滚动图片
<!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" "h ...
- 基于JQuery打造无缝滚动新闻
JQuery实现 新闻无缝滚动 一.使用"首尾追加"实现无缝滚动 <head lang="en"> <meta charset="U ...
- 轮播图采用js、jquery实现无缝滚动和非无缝滚动的四种案例实现,兼容ie低版本浏览器
项目源代码下载地址:轮播图 以下为项目实现效果:(由于gif太大,所以只上传一张图片,但效果完全能实现,经测试,在ie各版本浏览器及chrome,firefox等浏览器中均能实现效果,可以实现点击切换 ...
- jquery实现无缝滚动
//点击上一页 $('.pointLeft').click(function() { if (prevAllow) { prevAllow = false; scrollUlLeft = scroll ...
- liMarquee – jQuery无缝滚动插件(制作跑马灯效果)
liMarquee 是一款基于 jQuery 的无缝滚动插件,类似于 HTML 的 marquee 标签,但比 marquee 更强大.它可以应用于任何 Web 元素,包括文字.图像.表格.表单等元素 ...
随机推荐
- IOS解析XML
XML也许是我们储存数据和通讯数据中最常见的一种简易方式,当我们来到XML的海洋时,我们会发现当我们用iPhone程序解析XML时,我们是有如此多的选项,让人眼花缭乱.iOS SDK本身就带有两种不同 ...
- iOS-桥接方式
很多时候都会使用到CoreFoundation的函数,其返回值为CoreFoundation框架的对象,如果想转换为Foundation框架的对象就可以使用桥接方式来搞定. 示例代码: CFStrin ...
- [CSS3] 学习笔记-CSS选择器
CSS3中,选择器的分类很多,有元素选择器.类选择器.ID选择器.属性选择器.后代选择器.子元素选择器.相邻兄弟选择器. 1.最常见的选择器就是元素选择器,文档的元素就是最基本的选择器,例如,h1{} ...
- 关于Node.js后端架构的一点后知后觉
前言 上周有幸和淘宝前端团队的七念老师做了一些NodeJS方面上的交流(实际情况其实是他电话面试了我╮(╯-╰)╭),我们主要聊到了我参与维护的一个线上NodeJS服务,关于它的现状和当下的不足.他向 ...
- Brainfuck与Ook!编程语言解析与解密
MarkdownPad Document html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,ab ...
- MyEclipse-Initializing Java Tooling问题
问题描述: 今天早上打开Eclipse,打开Package Explorer 中项目时,总出现卡死现象. MyEclipse状态栏显示两个任务,(1) Checking for Updates (2) ...
- .Net Core 之 MSBuild 介绍
前言 关于 .NET Core 旧版本的 sdk 介绍可以参看我以前的 这篇 文章. 8 个小时前,.NET Core 项目组释放了 .NET Core 新一轮的 sdk 工具更新,即 RC4 版本 ...
- css3 3d学习心得
css3 3d学习心得 卡片反转 魔方 banner图 首先我们要学习好css3 3d一定要有一定的立体感 通过这个图片应该清楚的了解到了x轴 y轴 z轴是什么概念了. 首先先给大家看一个小例子: 卡 ...
- Windows 10 IoT Serials 6 - 如何修改IoTStartupOnBoot.cmd文件
使用Windows 10 IoT Core系统的朋友应该会比较熟悉IoTStartupOnBoot.cmd文件,该文件是系统启动以后加载的批处理文件,一般会包含应用.服务和后台的启动,比如WinRM. ...
- 张高兴的 UWP 开发笔记:用 Thumb 控件仿制一个可拖动 Button
在 WPF 上可用的控件拖动方法在 UWP 上大多没用,那干脆用 Thumb 仿制一个吧. 关于 Thumb 控件的教程也不多,毕竟在 WPF 控件拖动有很多种方法, Thumb 就显得很鸡肋了.下面 ...