怎样用原生js配合css的transition写个无缝滚动
之所以想要寫(xiě)原生js配合css轉(zhuǎn)換的無(wú)縫滾動(dòng)，是因?yàn)橹霸诤?jiǎn)書(shū)上看到一哥們寫(xiě)的一篇文章，說(shuō)是在網(wǎng)上找了一堆js配合css transition屬性寫(xiě)的輪播插件，可惜沒(méi)有無(wú)縫的效果，結(jié)果他用原生js重寫(xiě)了一個(gè)可以無(wú)縫滾動(dòng)的。好吧，我覺(jué)得這哥們的精神還是值得表?yè)P(yáng)的，只是原生實(shí)現(xiàn)略顯麻煩，也很難把握性能（利用定時(shí)器寫(xiě)的動(dòng)畫(huà)很容易有性能問(wèn)題）。
原生JavaScript無(wú)縫輪播圖特效 附上鏈接方便大家一同對(duì)比學(xué)習(xí)
其實(shí)原生js配合css轉(zhuǎn)換寫(xiě)個(gè)無(wú)縫滾動(dòng)要比直接用原生js寫(xiě)起來(lái)簡(jiǎn)單得多，而且性能非常好。希望通過(guò)這篇文章能起到拋磚引玉的笑果！哈哈哈哈，二話不說(shuō)，上碼！！！
首先附上相應(yīng)的HTML和CSS：
html
<div class="box"><ul id="box"><li>158****546已購(gòu)買(mǎi)1個(gè)月</li><li>158****546已購(gòu)買(mǎi)2個(gè)月</li><li>158****546已購(gòu)買(mǎi)3個(gè)月</li><li>158****546已購(gòu)買(mǎi)4個(gè)月</li><li>158****546已購(gòu)買(mǎi)5個(gè)月</li><li>158****546已購(gòu)買(mǎi)1個(gè)月</li></ul></div> 復(fù)制代碼css
.box{width: 300px;height: 40px;overflow: hidden;border: 1px solid rebeccapurple;}.box>ul{margin: 0;padding: 0;}.box>ul>li{list-style-type: none;width: 300px;height: 40px;line-height: 40px;}.count{font-size: 24px;} 復(fù)制代碼細(xì)心的朋友可能會(huì)發(fā)現(xiàn)HTML上面首尾兩個(gè)li是一樣的（哈哈哈，就是說(shuō)明一下它倆是一樣的）上圖！！啊哈哈哈哈，將就看一下，我畫(huà)了好久的。這里為了節(jié)約空間就橫著放了，下面的例子的滾動(dòng)是向上走的。
當(dāng)焦點(diǎn)位于圖片1的副本（即紅框那個(gè)1）時(shí)，那一瞬間讓整個(gè)列表回到初始的位置，即第一個(gè)1在紅框內(nèi)。對(duì)，最后面這個(gè)副本1就是為了讓用戶產(chǎn)生視覺(jué)差。
下面開(kāi)始編寫(xiě)相應(yīng)的js，先寫(xiě)一個(gè)構(gòu)造函數(shù)，然后把獲取的id以及向上滑動(dòng)的數(shù)值作為私有變量寫(xiě)死在構(gòu)造函數(shù)里面：
function sliderBox() {var list = document.getElementById('box'),newPosition = 0, //這里以u(píng)l作為位移目標(biāo)，newPosition為ul每次的位置offset = -40; //每次要上移的數(shù)值（先默認(rèn)為上移） } 復(fù)制代碼然后在構(gòu)造函數(shù)里面寫(xiě)一個(gè)私有函數(shù)
function animate () {newPosition+=offset;list.style.transition = "transform 0.6s";list.style.transform = "translateY(" + newPosition + "px)";if (newPosition < -160) {setTimeout(function () {newPosition = 0;list.style.transition = "";list.style.transform = "translateY(0)";}, 600);}} 復(fù)制代碼我們今天要說(shuō)的是無(wú)縫滾動(dòng)，到底在哪體現(xiàn)出無(wú)縫呢？上面的代碼怎么多出了一行l(wèi)ist.style.transition？為什么不直接寫(xiě)死在ul上面呢？因?yàn)檫@就是用原生js配合css轉(zhuǎn)換寫(xiě)無(wú)縫滾動(dòng)的關(guān)鍵所在！！
當(dāng)列表靜悄悄地重一開(kāi)始滑到第五個(gè)的時(shí)候，這是newPosition剛好等于-160，也就是說(shuō)ul的translateY為-160，這時(shí)候再來(lái)那么一下，這么一下照常的會(huì)執(zhí)行這三行：
newPosition+=offset; list.style.transition = "transform 0.6s"; list.style.transform = "translateY(" + newPosition + "px)"; 復(fù)制代碼是的，就在這一下的transition過(guò)渡完的那一瞬間，setTimeout可以執(zhí)行了。沒(méi)錯(cuò)，就跟前面畫(huà)的圖一樣，setTimeout里面的意思就是要讓ul回到最起始的位置。
這里需要注意的是，setTimeout的延遲時(shí)間和transition的過(guò)渡時(shí)間必須保持一致，這里就是保持無(wú)縫的最關(guān)鍵所在了。
到這里就算是講完了，其實(shí)沒(méi)多少東西，理解了就很簡(jiǎn)單。最后祭上代碼
html
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>.box{width: 300px;height: 40px;overflow: hidden;border: 1px solid rebeccapurple;}.box>ul{margin: 0;padding: 0;}.box>ul>li{list-style-type: none;width: 300px;height: 40px;line-height: 40px;}.count{font-size: 24px;}</style> </head> <body><div class="box"><ul id="box"><li>158****546已購(gòu)買(mǎi)1個(gè)月</li><li>158****546已購(gòu)買(mǎi)2個(gè)月</li><li>158****546已購(gòu)買(mǎi)3個(gè)月</li><li>158****546已購(gòu)買(mǎi)4個(gè)月</li><li>158****546已購(gòu)買(mǎi)5個(gè)月</li><li>158****546已購(gòu)買(mǎi)1個(gè)月</li></ul></div><script src="./slider2.js"></script><script>window.onload = function () {sliderBox();}</script> </body> </html> 復(fù)制代碼js
function sliderBox() {var list = document.getElementById('box'),newPosition = 0,offset = -40;if (!(this instanceof sliderBox)) {return new sliderBox().init();}this.init = function () {setInterval(animate, 3000);};function animate () {newPosition+=offset;list.style.transition = "transform 0.6s";list.style.transform = "translateY(" + newPosition + "px)";if (newPosition < -160) {setTimeout(function () {newPosition = 0;list.style.transition = "";list.style.transform = "translateY(0)";}, 600);}} } 復(fù)制代碼在下文筆拙劣，有什么不清楚或者有出入的地方，煩請(qǐng)斧正！歡迎留言！也希望能給我點(diǎn)贊，鼓勵(lì)我寫(xiě)出更好的文章。
總結(jié)
以上是生活随笔為你收集整理的怎样用原生js配合css的transition写个无缝滚动的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 使用CADisplayLink实现UIL
- 下一篇： 《图解 HTTP》读书笔记（未完待续）