js无缝滚动

cpupro 发布于2019-08-22 14:01 / 1522人阅读

seamless-scroll

js无缝滚动插件

? 简单demo
? English Document

兼容性

ie7+

不支持移动端手势。

使用

const seamless = require("seamscroll")
 `or`
import seamless from "seamscroll"

seamless.init({
  dom: document.getElementById("demo1")
})
//script tag

Demo

.demo2 {
    width: 600px;
    height: 100px;
    position: relative;
    overflow: hidden;
    margin-top: 100px;
}
.list2 li {
    float: left;
    width: 100px;
    height: 100px;
    margin-right: 20px;
    text-align: center;
    font-size: 20px;
    color: #fff;
    line-height:100px;
    background-color: #ccc;
}


seamscroll.init({
     dom: document.getElementById("demo2"),
     direction: 2
})

配置参数

*必填参数(dom)

key	description	default	val
*dom	作用的dom	null	dom
step	步长,越大越快	1	Number
hoverStop	是否启用鼠标hover控制	true	Boolean
direction	方向 0 往下 1 往上 2向左 3向右	1	Number
singleHeight	单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1	0	Number
singleWidth	单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3	0	Number
waitTime	单步停止等待时间(default 1s)	1000	Number

TKS

seamless-scroll发现bug或者有什么不足望指点,感觉不错点个star吧。

License

seamless-scroll is open source and released under the MIT License.

GPU云服务器云服务器 js无缝滚动无缝滚动水平无缝滚动文字无缝滚动

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/92772.html

vue无缝滚动的插件开发填坑分享

摘要：写插件的初衷项目经常需要无缝滚动效果，当时写的时候用用这个老插件，相对不上很好用。后来转向在没有找到好的无缝滚动插件，除了配置可以实现但是相对来说太重了，于是自己造了个轮子。写插件的初衷 1.项目经常需要无缝滚动效果，当时写jq的时候用用msClass这个老插件，相对不上很好用。2.后来转向vue在vue-awesome没有找到好的无缝滚动插件，除了配置swiper可以实现但是相对来...

岳光 2019-08-22 14:04 评论0 收藏0
还在为无缝滚动而烦恼？是时候彻底get到这个知识点了

摘要：最近一直在忙公司炒股大赛的页面，终于在昨天把他给上线了。刚开始学习的时候，真心觉得无缝滚动是一个神奇的功能。原理假如需要无缝滚动的个元素是一个中的个。我们将控制在容器中滚动。这样无缝滚动就已经实现了。最近一直在忙公司炒股大赛的页面，终于在昨天把他给上线了。一个看似简单的页面，做起来才知道其中的艰辛，暗藏深坑。由于直接使用jquery来写页面逻辑，因此要比想象中复杂很多。无论是从布局，...

stormjun 2019-08-19 18:20 评论0 收藏0
js、jQuery实现文字上下无缝轮播、滚动效果

摘要：因项目需要实现消息通知上下无缝轮播的效果，所以写了一下，在这个分享出来，希望再次遇到此需求的道友，可以直接拷贝来用，节约一点不必要的时间。因项目需要实现消息通知上下无缝轮播的效果，所以写了一下，在这个分享出来，希望再次遇到此需求的道友，可以直接拷贝来用，节约一点不必要的时间。原生JS版本文字上下无缝轮播 * { margin: ...

zhangwang 2019-08-22 18:24 评论0 收藏0
js、jQuery实现文字上下无缝轮播、滚动效果

摘要：因项目需要实现消息通知上下无缝轮播的效果，所以写了一下，在这个分享出来，希望再次遇到此需求的道友，可以直接拷贝来用，节约一点不必要的时间。因项目需要实现消息通知上下无缝轮播的效果，所以写了一下，在这个分享出来，希望再次遇到此需求的道友，可以直接拷贝来用，节约一点不必要的时间。原生JS版本文字上下无缝轮播 * { margin: ...

PAMPANG 2019-08-02 10:48 评论0 收藏0
js、jQuery实现文字上下无缝轮播、滚动效果

摘要：因项目需要实现消息通知上下无缝轮播的效果，所以写了一下，在这个分享出来，希望再次遇到此需求的道友，可以直接拷贝来用，节约一点不必要的时间。因项目需要实现消息通知上下无缝轮播的效果，所以写了一下，在这个分享出来，希望再次遇到此需求的道友，可以直接拷贝来用，节约一点不必要的时间。原生JS版本文字上下无缝轮播 * { margin: ...

focusj 2019-08-30 15:53 评论0 收藏0