转: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. jquery 高级 学习笔记

    --jquery 和 原生js可以共存,但不能混用.jquery 可以通过get()方法 转换为原生js. $("#div1").get(0).innerHTML; get() 需 ...

  2. css单位总结

    body的font-size:14px     body第二代子元素的font-size: em: 1.2em=1.2*1.2*14px rem:1.2rem=1.2*14px 视口高度:1000px ...

  3. Spark Streaming实时写入数据到HBase

    一.概述 在实时应用之中,难免会遇到往NoSql数据如HBase中写入数据的情景.题主在工作中遇到如下情景,需要实时查询某个设备ID对应的账号ID数量.踩过的坑也挺多,举其中之一,如一开始选择使用NE ...

  4. 腾讯优图及知脸(ZKface)人脸比对接口测试(python)

    一.腾讯优图 1.开发者地址:http://open.youtu.qq.com/welcome/developer 2.接入流程:按照开发者页面的接入流程接入之后,创建应用即可获得所需的AppID.S ...

  5. Android 学习笔记1

    参考:http://blog.csdn.net/ztp800201/article/details/7265414 为了快速引入后面的内容就直接使用了这种办法来实现功能,后期再改进: /* ***** ...

  6. iis7.0 ExtensionlessUrlHandler-Integrated-4.0解决方法

    IIS7.0上部署网站,打开后500错误: 处理程序“ExtensionlessUrlHandler-Integrated-4.0” 在其模块列表中有一个错误模块“ManagedPipelineHan ...

  7. IP查询接口

    腾讯的: http://fw.qq.com/ipaddress直接返回本机的IP地址对应的地区新浪的:http://counter.sina.com.cn/ip?ip=IP地址返回Js数据,感觉不是很 ...

  8. Spring应用上下文中Bean的生命周期

    Bean装载到Spring应用上下文的生命周期,如图: Bean在Spring容器中从创建到销毁经历了若干个阶段,每一阶段都可以对Spring如何管理Bean进行个性化定制,以下我们通过代码去验证生命 ...

  9. ARM处理器:开放者的逆袭

    作者:Vamei 出处:http://www.cnblogs.com/vamei 严禁转载. 1981年,英国BBC电视台策划了一系列关于计算机的电视节目.但导演发现一个问题:怎么给没见过电脑的观众画 ...

  10. js设计模式--工厂模式

    工厂模式: 工厂模式的目的是为了创建对象,它经常是在类和类的方法中实现.简单的工厂模式是由一个方法来决定到底要创建哪类的实例,这些实例经常拥有相同的接口,这种模式在所实例化的类型在编译期并不确定,而是 ...