jQuery kxbdMarquee 无缝滚动

转载 2016年05月31日 10:05:45

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

版本:jQuery v1.3.2+

文档目录
  1. 使用方法
  2. 参数说明
  3. 相关信息

使用方法

载入 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.js

代码:https://github.com/erdouzhang/jquery.kxbdmarquee.js 在线演示:https://erdouzhang.github.io/jquery....
  • erdouzhang
  • erdouzhang
  • 2017年02月14日 21:35
  • 624

jQuery实现图片无缝滚动

HTML代码: CSS代码: *{ margin: 0;padding: 0; ...
  • qq_35051603
  • qq_35051603
  • 2017年12月26日 10:26
  • 57

jQuery实现轮播图的无缝滚动

之前在学习jQuery时,想做一个轮播图的demo,于是在网上了找了相关的视频教程。然后根据教程不断的改变ul元素的左外边距自己做了一个demo,但是在演示的时候,最后一张到第一张图片切换到时候没有动...
  • u010594453
  • u010594453
  • 2015年09月02日 13:08
  • 3946

jquery实例-多张图片无缝滚动实现

:http://blog.zxtms.net/blog/WorkPace/Jquery/jquerySider/sider.html 演示效果
  • u010109898
  • u010109898
  • 2014年08月23日 10:36
  • 5974

一个文字无缝滚动的jQuery插件

直接上代码吧
  • cpytiger
  • cpytiger
  • 2014年04月11日 17:56
  • 4552

利用JQuery一步步打造无缝滚动新闻

首先,我们这里有这么一段html代码,很简洁,如下所示: 1 div id="tag"> 2 ul> 3 li>你说我是好人吗,我是好人啊li> 4 li>哈哈,我真的不知道说什么了l...
  • quryktcs
  • quryktcs
  • 2017年05月10日 15:54
  • 202

一个很不错的jquery 图片导航,图片轮换 代码

相信WEB开发人员经常需要处理一些图片的滚动等效果,这里我给大家介绍个比较的JQUERY函数kxbdSuperMarquee 代码:js(function($){ $.fn.kxbdSuperMarq...
  • raojinpg
  • raojinpg
  • 2011年01月25日 15:35
  • 4370

jQuery实现列表无缝滚动

  • qq_29376717
  • qq_29376717
  • 2017年10月06日 10:32
  • 129

xMarquee jquery实现文字水平无缝滚动

xMarquee     .xMarquee{border:1px solid #ccc;height:25px;width:500px; margin:50px auto; backgro...
  • zyx13859002783
  • zyx13859002783
  • 2014年04月28日 17:18
  • 3693

文字向左无缝滚动

下面是文字向左无缝滚动的实例,仅供参考。 js文字向左无缝滚动 .qimo8 { overflow:...
  • jsl1933291679
  • jsl1933291679
  • 2016年08月04日 18:11
  • 106
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jQuery kxbdMarquee 无缝滚动
举报原因:
原因补充:

(最多只允许输入30个字)