转:http://code.ciaoca.com/jquery/kxbdmarquee/

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

版本:jQuery v1.3.2+
 
使用方法

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

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

    <marquee> 曾是 IE 下独有的一个走马灯效果的标签,其他浏览器并不兼容,于是出现了使用 JavaScript 来模拟该效果的插件. 版本: jQuery v1.3.2+ 在线实例 ...

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

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

  3. jQuery图片无缝滚动

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

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

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

  5. JQuery的无缝滚动

    图片无缝向左滚动的代码如下:   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...

  6. 基于JQuery打造无缝滚动新闻

    JQuery实现 新闻无缝滚动 一.使用"首尾追加"实现无缝滚动 <head lang="en"> <meta charset="U ...

  7. 轮播图采用js、jquery实现无缝滚动和非无缝滚动的四种案例实现,兼容ie低版本浏览器

    项目源代码下载地址:轮播图 以下为项目实现效果:(由于gif太大,所以只上传一张图片,但效果完全能实现,经测试,在ie各版本浏览器及chrome,firefox等浏览器中均能实现效果,可以实现点击切换 ...

  8. jquery实现无缝滚动

    //点击上一页 $('.pointLeft').click(function() { if (prevAllow) { prevAllow = false; scrollUlLeft = scroll ...

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

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

随机推荐

  1. 从0到1学习node之简易的网络爬虫

    本文地址: http://www.xiabingbao.com/node/2017/01/19/node-spider.html 我们这节的目标是学习完本节课程后,能进行网页简单的分析与抓取,对抓取到 ...

  2. ArcGIS三种方式打断相交线------拓扑法

    拓扑法:有多个layer图层相交线,选用拓扑法,将多个图层相交线打断. 新建拓扑结构: (1)单击新建"Nfg.gdb"数据库文件: (2)单击新建"XX"集合 ...

  3. 百度云推送----iOS

    前言 记录一下这几天学习的百度推送,觉得这个东西弄的还挺糟心的,好多注意的地方 正文 1.先申请一个百度开发者账号 http://push.baidu.com/fc 2.创建一个新应用,并应用配置 3 ...

  4. matlab switch case 和 try catch用法示例

    %清除变量或指令 clc;clear; % 允许用户输入参数 disp ('该功能练习switch语句'); disp ('输入1-10其中一个数,系统判定奇偶. '); count = input ...

  5. .Net程序员学用Oracle系列(16):访问数据库(ODP.NET)

    1..Net for Oracle 常见数据库驱动 1.1.微软提供的驱动 1.2.甲骨文提供的驱动 1.3.其它厂商提供的驱动 2.ODP.NET 常见问题分析 2.1.参数化问题 2.2.方法调用 ...

  6. ASP.NET MVC用存储过程批量添加修改数据

    用Entity Framework 进行数据库交互,在代码里直接用lamda表达式和linq对数据库操作,中间为程序员省去了数据库访问的代码时间,程序员直接可以专注业务逻辑层的编写.但是对于比较复杂的 ...

  7. 第四章:JQuery选择器

    一.使用选择器的目的 从页面上的万万千千个元素中选择自己需要的. 二.选择器的分类 1.基本选择器 *:标签 *:类 *:ID 交集  AB   AB共同的部分    并集  A,B  AB使用相同的 ...

  8. 【排序算法】直接选择排序算法 Java实现

    基本思想 直接选择排序是从无序区选一个最小的元素直接放到有序区的最后. 初始状态:无序区为a[1...n],有序区为空. 第一次排序:在无序区a[1...n]中选出最小的记录a[k],将它与有序区的第 ...

  9. PDO数据访问抽象层

    PDO数据访问抽象层: 我们使用的mysqli是针对mysql这个数据库扩展的一个类,如果要用到别的数据库的话就可以用PDO来做 1.操作数据库 先来代码 <!--PDO--> <! ...

  10. 【Java基础】ArrayList工作原理

    ArrayList 以数组实现.节约空间,但数组有容量限制.超出限制时会增加50%容量,用System.arraycopy()复制到新的数组.因此最好能给出数组大小的预估值.默认第一次插入元素时创建大 ...