jQuery kxbdMarquee 无缝滚动

深碍√TFBOYSˉ_ 2022-12-30 10:58 147阅读 0赞

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

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

版本：jQuery v1.3.2+

[下载 jQuery kxbdMarquee][jQuery kxbdMarquee]

[查看 Demo][Demo]

使用方法

### 载入 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});

### 参数说明 ###

<table> 
 <thead> 
  <tr> 
   <th>名称</th> 
   <th>默认值</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>direction</td> 
   <td>"left"</td> 
   <td>滚动方向。可设置为："left", "right", "up", "down"</td> 
  </tr> 
  <tr> 
   <td>isEqual</td> 
   <td>true</td> 
   <td>所有滚动的元素长宽是否相等。可设置为：true, false</td> 
  </tr> 
  <tr> 
   <td>loop</td> 
   <td>0</td> 
   <td>循环滚动次数，0 表示无限循环</td> 
  </tr> 
  <tr> 
   <td>scrollAmount</td> 
   <td>1</td> 
   <td>步长(px)</td> 
  </tr> 
  <tr> 
   <td>scrollDelay</td> 
   <td>20</td> 
   <td>时长(ms)</td> 
  </tr> 
 </tbody> 
</table>

[jQuery kxbdMarquee]: http://code.ciaoca.com/jquery/kxbdmarquee/version/jQuery.kxbdMarquee.zip
[Demo]: http://code.ciaoca.com/jquery/kxbdmarquee/demo/

发表评论取消回复

表情：

评论列表（有 0 条评论，147人围观）

还没有评论，来说两句吧...

相关阅读

相关 jQuery kxbdMarquee 无缝滚动

转：http://code.ciaoca.com/jquery/kxbdmarquee/ <marquee> 曾是 IE 下独有的一个走马灯效果的标签，其他浏览器并不兼容，于

深碍√TFBOYSˉ_/ 2022年12月30日 10:58/ 0 赞/ 148 阅读

相关 javascript 书写无缝滚动。

废话少说，献上demo [ 源码][Link 1] 大家自己下载看效果。先放上html代码： <!DOCTYPE html> <html> <h

╰半夏微凉°/ 2022年09月25日 13:17/ 0 赞/ 197 阅读

相关 marquee无缝滚动

marquee无缝滚动利用i5scroll进行二次封装 > 为了满足工作需求进行二次封装 ~(function ($, window, document,

布满荆棘的人生/ 2022年08月30日 11:39/ 0 赞/ 190 阅读

相关 jQuery实现轮播图的无缝滚动

之前在学习jQuery时，想做一个轮播图的demo，于是在网上了找了相关的视频教程。然后根据教程不断的改变ul元素的左外边距自己做了一个demo，但是在演示的时候，最后一张到第

╰半夏微凉°/ 2022年08月04日 14:46/ 0 赞/ 343 阅读

相关 js实现无缝向上滚动

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

矫情吗；*/ 2022年05月13日 08:36/ 0 赞/ 246 阅读

相关 js图片无缝滚动

> 虽然是一个简单的案例，但思想确实很巧妙，且一通百通！主要原理：利用利用动态创建一个与当前相同的图片条，利用scrollLeft（滚动条的左水平偏移来实现滚动用利用视觉

爱被打了一巴掌/ 2022年03月25日 08:57/ 0 赞/ 387 阅读

相关 jQuery无缝连接

html代码 <body> <ul class="mscroll-ul"> <li class="item fore1">

一时失言乱红尘/ 2022年02月02日 19:37/ 0 赞/ 196 阅读

相关 Vue无缝滚动

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQx

我就是我/ 2021年09月03日 04:01/ 0 赞/ 465 阅读

相关 liMarquee – jQuery无缝滚动插件

简介 `liMarquee` 是一款基于 `jQuery` 的无缝滚动插件，类似于 `HTML` 的 `marquee` 标签，但比 `marquee` 更强大。它可以应

女爷i/ 2021年06月26日 16:06/ 0 赞/ 1238 阅读

相关 Jquery+css实现图片无缝滚动轮播

Today，在XX学院的教学视频中，偶尔看到了Jquery+css实现图片无缝滚动轮播视频教程，虽然以前已写过类似的，但是我感觉他学的比较精简。为了方便以后做项目时直接拷...

系统管理员/ 2021年01月27日 15:32/ 0 赞/ 798 阅读