kxbdSuperMarquee.js滚动的神器使用

avatar
avatar
小王先森
386
文章
383
评论
2020年5月2日 1 357

kxbdSuperMarquee.js可谓是一个滚动的神器,关于滚动的什么效果都可以实现,文字的滚动,图片的滚动,轮播图,向上、向下、向左、向右都可以实现。只要用好了它,几本上什么滚动都不会愁的。

使用方法

1、载入 JavaScript 文件

<script src="jquery.js"></script>
<script src="jquery.kxbdmarquee.js"></script>
$(function(){
    $(‘#marquee’).kxbdSuperMarquee({
        isMarquee:true,
        isEqual:false,
        scrollDelay:60,
        direction:’up’
        loop: 0
    });
});
</script>

2、CSS 样式

/**
 * 父容器需要设置溢出隐藏
 * 如果是水平滚动,项目需要设置浮动
 * 如果是垂直滚动,项目需要设置高度
 */
.element_class{overflow:hidden;height:300px;}
.element_class ul li{float:left;}

3、HTML代码

<div class="element_class" id="marquee">
  <ul>
    <li>...</li>
    <li>...</li>
    <li>...</li>
  </ul>
</div>

参数说明

名称 默认值 说明
direction "left" 滚动方向。可设置为:"left", "right", "up", "down"
isEqual true 所有滚动的元素长宽是否相等。可设置为:true, false
loop 0 循环滚动次数,0 表示无限循环
scrollAmount 1 步长(px)
scrollDelay 20 时长(ms)
avatar
  • 本文由 发表于 2020年5月2日
  • 除非特殊声明,本站文章均为原创,转载请务必保留本文链接
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

评论:1   其中:访客  1   博主  0
    • avatar 萧瑟 5

      感觉原生好一些,插件用多了,可能有重复。 :razz: