這是之前客戶的一個需求，給的 demo 是用 gif 實現跑馬燈，但是我們的沒法用 gif，因為圖上的文字需要翻譯成各國語言，所以不能使用圖片來實現，那么，自己寫一個咯。
思考過程
html
| <div lantern> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul></div> |
css
| * { margin: 0; padding: 0;}[lantern] { overflow: hidden;}ul { white-space: nowrap; font-size: 0; transform: translateX(0); transition: transform 0s linear;}li { width: 50vw; border: 1px solid red; display: inline-block; height: 30px; font-size: 16px;} |
js
| function lantern($element,speed = 10) { let liWidth = 0; let $ul = $element.find("ul"); function run(init = false) { let $li = $ul.find("li").first(); liWidth = $li.outerWidth(); if(!init){ $ul.append($li[0].outerHTML); $li.remove(); } $ul[0].style.transitionDuration = "0s"; $ul[0].style.transform = "translateX(0)"; setTimeout(function() { $ul[0].style.transitionDuration = speed + "s"; $ul[0].style.transform = "translateX(-" + liWidth + "px)"; }, 20); } run(true); setTimeout(() => { setInterval(run, speed * 1000); }, 0); } lantern($('[lantern]'), 20); |
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持錯新站長站。
新聞熱點
疑難解答
