js無縫滾動(dòng)

cpupro 發(fā)布于2019-08-22 14:01 / 1583人閱讀

seamless-scroll

js無縫滾動(dòng)插件

? 簡(jiǎn)單demo
? English Document

兼容性

ie7+

不支持移動(dòng)端手勢(shì)。

使用

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
})

配置參數(shù)

*必填參數(shù)(dom)

key	description	default	val
*dom	作用的dom	null	dom
step	步長(zhǎng),越大越快	1	Number
hoverStop	是否啟用鼠標(biāo)hover控制	true	Boolean
direction	方向 0 往下 1 往上 2向左 3向右	1	Number
singleHeight	單步運(yùn)動(dòng)停止的高度(默認(rèn)值0是無縫不停止的滾動(dòng)) direction => 0/1	0	Number
singleWidth	單步運(yùn)動(dòng)停止的寬度(默認(rèn)值0是無縫不停止的滾動(dòng)) direction => 2/3	0	Number
waitTime	單步停止等待時(shí)間(default 1s)	1000	Number

TKS

seamless-scroll發(fā)現(xiàn)bug或者有什么不足望指點(diǎn),感覺不錯(cuò)點(diǎn)個(gè)star吧。

License

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

云服務(wù)器 GPU云服務(wù)器 js無縫滾動(dòng) 無縫滾動(dòng) 水平無縫滾動(dòng) 文字無縫滾動(dòng)

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/92772.html

相關(guān)文章

vue無縫滾動(dòng)的插件開發(fā)填坑分享

摘要：寫插件的初衷項(xiàng)目經(jīng)常需要無縫滾動(dòng)效果，當(dāng)時(shí)寫的時(shí)候用用這個(gè)老插件，相對(duì)不上很好用。后來轉(zhuǎn)向在沒有找到好的無縫滾動(dòng)插件，除了配置可以實(shí)現(xiàn)但是相對(duì)來說太重了，于是自己造了個(gè)輪子。寫插件的初衷 1.項(xiàng)目經(jīng)常需要無縫滾動(dòng)效果，當(dāng)時(shí)寫jq的時(shí)候用用msClass這個(gè)老插件，相對(duì)不上很好用。2.后來轉(zhuǎn)向vue在vue-awesome沒有找到好的無縫滾動(dòng)插件，除了配置swiper可以實(shí)現(xiàn)但是相對(duì)來...

岳光 2019-08-22 14:04 評(píng)論0 收藏0
還在為無縫滾動(dòng)而煩惱？是時(shí)候徹底get到這個(gè)知識(shí)點(diǎn)了

摘要：最近一直在忙公司炒股大賽的頁(yè)面，終于在昨天把他給上線了。剛開始學(xué)習(xí)的時(shí)候，真心覺得無縫滾動(dòng)是一個(gè)神奇的功能。原理假如需要無縫滾動(dòng)的個(gè)元素是一個(gè)中的個(gè)。我們將控制在容器中滾動(dòng)。這樣無縫滾動(dòng)就已經(jīng)實(shí)現(xiàn)了。最近一直在忙公司炒股大賽的頁(yè)面，終于在昨天把他給上線了。一個(gè)看似簡(jiǎn)單的頁(yè)面，做起來才知道其中的艱辛，暗藏深坑。由于直接使用jquery來寫頁(yè)面邏輯，因此要比想象中復(fù)雜很多。無論是從布局，...

stormjun 2019-08-19 18:20 評(píng)論0 收藏0
js、jQuery實(shí)現(xiàn)文字上下無縫輪播、滾動(dòng)效果

摘要：因項(xiàng)目需要實(shí)現(xiàn)消息通知上下無縫輪播的效果，所以寫了一下，在這個(gè)分享出來，希望再次遇到此需求的道友，可以直接拷貝來用，節(jié)約一點(diǎn)不必要的時(shí)間。因項(xiàng)目需要實(shí)現(xiàn)消息通知上下無縫輪播的效果，所以寫了一下，在這個(gè)分享出來，希望再次遇到此需求的道友，可以直接拷貝來用，節(jié)約一點(diǎn)不必要的時(shí)間。原生JS版本文字上下無縫輪播 * { margin: ...

zhangwang 2019-08-22 18:24 評(píng)論0 收藏0
js、jQuery實(shí)現(xiàn)文字上下無縫輪播、滾動(dòng)效果

摘要：因項(xiàng)目需要實(shí)現(xiàn)消息通知上下無縫輪播的效果，所以寫了一下，在這個(gè)分享出來，希望再次遇到此需求的道友，可以直接拷貝來用，節(jié)約一點(diǎn)不必要的時(shí)間。因項(xiàng)目需要實(shí)現(xiàn)消息通知上下無縫輪播的效果，所以寫了一下，在這個(gè)分享出來，希望再次遇到此需求的道友，可以直接拷貝來用，節(jié)約一點(diǎn)不必要的時(shí)間。原生JS版本文字上下無縫輪播 * { margin: ...

PAMPANG 2019-08-02 10:48 評(píng)論0 收藏0
js、jQuery實(shí)現(xiàn)文字上下無縫輪播、滾動(dòng)效果

摘要：因項(xiàng)目需要實(shí)現(xiàn)消息通知上下無縫輪播的效果，所以寫了一下，在這個(gè)分享出來，希望再次遇到此需求的道友，可以直接拷貝來用，節(jié)約一點(diǎn)不必要的時(shí)間。因項(xiàng)目需要實(shí)現(xiàn)消息通知上下無縫輪播的效果，所以寫了一下，在這個(gè)分享出來，希望再次遇到此需求的道友，可以直接拷貝來用，節(jié)約一點(diǎn)不必要的時(shí)間。原生JS版本文字上下無縫輪播 * { margin: ...

focusj 2019-08-30 15:53 評(píng)論0 收藏0