文字滾動(dòng)代碼(文字滾動(dòng)代碼html)

題目：

使用jQuery，實(shí)現(xiàn)如下圖所示的文字滾動(dòng)效果。

分析：

實(shí)現(xiàn)步驟：

<div id="app"> <div id="title">天天動(dòng)態(tài)</div> <ul id="ulist"> <li>銀行匯款賬號(hào)變更</li> <li>卡莉芙面膜分享心得</li> <li>狂歡大放價(jià)2折起 滿再減</li> <li>天天網(wǎng)榮膺消費(fèi)者最喜愛的網(wǎng)站</li> <li>天天網(wǎng)防詐騙公告</li> <li>韓妝集結(jié)號(hào) 全網(wǎng)五折封頂</li> </ul></div>

同時(shí)，不要忘記在header中引入jQuery。

<script src="jquery-3.6.0.min.js"></script>調(diào)整樣式，最終代碼如下。

<style> #app { width: 300px; border: 1px solid gray; position: relative; left: 40px; height: 100px; overflow: hidden; } #title { position: relative; background-color: lightgray; z-index: 10; } #ulist { display: block; position: relative; overflow: hidden; margin: 0px; } #ulist li { display: block; }</style>

這步過后，效果如下圖：

定義一個(gè)函數(shù)scroll()，功能是實(shí)現(xiàn)一個(gè)列表項(xiàng)的滾動(dòng)動(dòng)畫，動(dòng)畫時(shí)間1

，然后，每間隔2s調(diào)用一次。代碼如下。

<script> // 向上滾動(dòng)一次的函數(shù) function scroll() { // 獲取一個(gè)列表項(xiàng)的高度 var height = $("#ulist li").height(); // 暫存ulist元素 var ulist = $("#ulist"); // 動(dòng)態(tài)改變CSS中的top屬性，動(dòng)畫時(shí)間是1s ulist.animate({ top: "-" + height }, 1000, function () { // 動(dòng)畫結(jié)束后，挪動(dòng)列表第一項(xiàng)位置，將其放在最后一項(xiàng)后面 ulist.find("li:last").after(ulist.find("li:first")); // 這時(shí)，原來的第二項(xiàng)就成了第一項(xiàng)，改動(dòng)后位置不再需要向上移動(dòng)， // 因此top重新設(shè)置成0 ulist.css({ top: 0 }); }); } // 開始調(diào)用一次 scroll(); // 后面每隔2s調(diào)用一次 tInterval(scroll, 2000); </script>

完工。