转: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. css 绝对居中

    我是一个前端的菜鸟,对于绝对居中前几天也困惑了我不少时间,今天我就把我知道的两个方法写出来,希望能记住也希望帮助到和我一样刚接触前端不久的同学. 第一种是 你需要居中的元素有固定的宽高: 首先给他的父 ...

  2. ArcGIS API for JavaScript 4.2学习笔记[4] 第二章其余感兴趣的例子

    先马克,估计要用到的有: 视图存档 2D地图添加指南针 视图移动 鹰眼 2D3D视图同步.同视图不同数据同步 以后实战的时候再仔细研究研究.

  3. WebForm 控件(二)

    控件 Calendar:日历控件 但是html代码量太大不适用 FileUpdate: 文件上传 HiddenField:隐藏域 Image: 图片  可以直接给URL 不适用可用html代码写 Ta ...

  4. Professional C# 6 and .NET Core 1.0 - 38 Entity Framework Core

    本文内容为转载,重新排版以供学习研究.如有侵权,请联系作者删除. 转载请注明本文出处:Professional C# 6 and .NET Core 1.0 - 38 Entity Framework ...

  5. array_count_values:返回数组中所有值出现的次数

    $arr1 = ['a','b','c','d','e','e','a','a']; $arr = array_count_values($arr1);   echo '<pre>'; p ...

  6. 读书笔记 effective c++ Item 1 将c++视为一个语言联邦

    Item 1 将c++视为一个语言联邦 如今的c++已经是一个多重泛型变成语言.支持过程化,面向对象,函数式,泛型和元编程的组合.这种强大使得c++无可匹敌,却也带来了一些问题.所有“合适的”规则看上 ...

  7. linux虚拟机CentOS 7完整安装流程截图

    安装VMware虚拟机过程此处省略,只介绍在虚拟机上安装linux系统CentOS 7过程截图. 1 新建虚拟机 2 命名虚拟机,选择linux安装位置 3 选择虚拟机处理器数量和处理器核心数 4 分 ...

  8. Java TreeSet集合排序 && 定义一个类实现Comparator接口,覆盖compare方法 && 按照字符串长度排序

    package TreeSetTest; import java.util.Iterator; import java.util.TreeSet; import javax.management.Ru ...

  9. react搭配amazeui环境搭建

    1.安装node https://nodejs.org/en/download/ 查看node   npm版本 2.安装react 创建新的react单页面应用 npm install  -g cre ...

  10. tomcat 假死

    1.1 编写目的 为了方便大家以后发现进程假死的时候能够正常的分析并且第一时间保留现场快照.1.2编写背景最近服务器发现tomcat的应用会偶尔出现无法访问的情况.经过一段时间的观察最近又发现有台to ...