您好,登錄后才能下訂單哦!
這篇文章主要介紹“Javascript怎么實(shí)現(xiàn)字幕滾動(dòng)”的相關(guān)知識(shí),小編通過(guò)實(shí)際案例向大家展示操作過(guò)程,操作方法簡(jiǎn)單快捷,實(shí)用性強(qiáng),希望這篇“Javascript怎么實(shí)現(xiàn)字幕滾動(dòng)”文章能幫助大家解決問(wèn)題。
Javascript實(shí)現(xiàn)字幕滾動(dòng)的方法:首先創(chuàng)建HTML和css文件;然后將容器設(shè)置固定寬度,并設(shè)置超出部分隱藏;最后創(chuàng)建js文件并通過(guò)定時(shí)器改變位置即可。
本文操作環(huán)境:windows7系統(tǒng)、javascript1.8.5版、Dell G3電腦。
Javascript怎么實(shí)現(xiàn)字幕滾動(dòng)?
使用css和原生js實(shí)現(xiàn)的字幕滾動(dòng)效果,無(wú)縫銜接
容器設(shè)置固定寬度,超出部分隱藏,滾動(dòng)部分絕對(duì)定位并通過(guò)定時(shí)器改變位置
html部分
<p class="scroll"> <span>這里是要現(xiàn)實(shí)的滾動(dòng)內(nèi)容......</span> </p>
css部分
.scroll { width: 400px; height: 23px; white-space: nowrap; overflow: hidden; margin-left: 40px; position: relative; } .scroll > span { position: absolute; }
js部分
// 字幕滾動(dòng)變量 var scrollTime = null var LEN = 400 // 一個(gè)完整滾動(dòng)條的長(zhǎng)度 var x = 0 // 啟動(dòng)滾動(dòng)定時(shí)器 function roll () { console.log('啟動(dòng)') var tag1 = document.querySelector('.scroll>span') var tag2 = tag1.nextSibling var fun = function () { tag1.style.left = x + 'px' tag2.style.left = (x + LEN) + 'px' x = x - 5 if ((x + LEN) === 0) { x = 0 } } if (scrollTime) { clearInterval(scrollTime) } scrollTime = setInterval(fun, 300) } // 綁定鼠標(biāo)事件 function bindMouseEvent () { var el = document.querySelector('.scroll>span') var el2 = el.cloneNode(true) LEN = el.clientWidth + 100 // 動(dòng)態(tài)修改滾動(dòng)條的長(zhǎng)度,避免文字過(guò)多重疊 el2.style.left = (x + LEN) + 'px' el.parentElement.appendChild(el2) el.addEventListener('mouseenter', function (e) { clearInterval(scrollTime) }) el.addEventListener('mouseleave', function (e) { roll() }) }
關(guān)于“Javascript怎么實(shí)現(xiàn)字幕滾動(dòng)”的內(nèi)容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí),可以關(guān)注億速云行業(yè)資訊頻道,小編每天都會(huì)為大家更新不同的知識(shí)點(diǎn)。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。