js無縫滾動

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

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

配置參數(shù)

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

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

TKS

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

License

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

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

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

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/92772.html

相關(guān)文章

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

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

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

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

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

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

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

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

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

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

focusj 2019-08-30 15:53 評論0 收藏0