這是之前客戶的一個(gè)需求，給的 demo 是用 gif 實(shí)現(xiàn)跑馬燈，但是我們的沒法用 gif，因?yàn)閳D上的文字需要翻譯成各國語言，所以不能使用圖片來實(shí)現(xiàn)，那么，自己寫一個(gè)咯。
思考過程
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);以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持VeVb武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
圖片精選
