當前位置：首頁 > news >正文

順德品牌網(wǎng)站建設優(yōu)惠友情鏈接是外鏈嗎

news 2025/7/9 5:59:17

順德品牌網(wǎng)站建設優(yōu)惠,友情鏈接是外鏈嗎,黑馬網(wǎng)站建設,甘肅住房和城鄉(xiāng)建設廳網(wǎng)站目錄第三方實現(xiàn)跑馬燈手寫實現(xiàn)跑馬燈手寫實現(xiàn)跑馬燈【整體代碼】自己細心研究一下上述代碼第三方實現(xiàn)跑馬燈 https://vue3-marquee.vercel.app/guide.html#changes-from-v2https://evodiaaut.github.io/vue-marquee-text-component/ 手寫實現(xiàn)跑馬燈 CSS部分 <style>.m…

第三方實現(xiàn)跑馬燈

https://vue3-marquee.vercel.app/guide.html#changes-from-v2
https://evodiaaut.github.io/vue-marquee-text-component/

手寫實現(xiàn)跑馬燈

CSS部分

    <style>.marquee-wrap {box-sizing: border-box;width: 814px;height: 36px;background-color: rgba(255, 255, 255, 0);background-image: linear-gradient(to left,rgba(255, 255, 255, 0),#dfbb7b,rgba(255, 255, 255, 0));line-height: 24px;font-size: 16px;text-align: center;border-radius: 5px;overflow: hidden;user-select: none;color: #181818;position: absolute;top: 290px;left: 58%;transform: translateX(-50%);}.scroll_div {white-space: nowrap;overflow: hidden;}.scroll_div pre {display: inline-block;height: 36px;margin: 0px;line-height: 36px;}</style>

HTML部分

    <div class="marquee-wrap"><div class="marquee-content"><div class="scroll_div"><pre class="scroll_begin" id="marqueeList"></pre><pre class="scroll_end" style="display: inline-block"></pre></div></div></div>

JS部分

<script>initMarquee();// 設置滾動var scroll_div = document.getElementsByClassName("scroll_div")[0];var scroll_begin = document.getElementsByClassName("scroll_begin")[0];var scroll_end = document.getElementsByClassName("scroll_end")[0];function initMarquee() {var processedCfg = {};// 假數(shù)據(jù)processedCfg.marqueeList = [{ id: 1, user: "2624*****", name: " 黯晶巨牛 阿利斯塔 " },{ id: 2, user: "2624*****", name: " 咖啡甜心 索拉卡 " },{ id: 3, user: "2624*****", name: " 防暴機器人 布里茨 " },{ id: 4, user: "2624*****", name: " 創(chuàng)世之神 內(nèi)瑟斯 " },{ id: 5, user: "2624*****", name: " 秩序之舌 塔姆 " },{ id: 6, user: "2624*****", name: " 攝魂男爵 弗拉基米爾 " },{ id: 7, user: "2624*****", name: " 傳統(tǒng)造型 特朗德爾 " },{ id: 8, user: "2624*****", name: " 夜行義賊 艾瑞莉婭 " },{ id: 9, user: "3012*****", name: " 海賊 瑞茲 " },{ id: 10, user: "3561*****", name: " 靈魂烈焰 布蘭德 " },{ id: 11, user: "1104*****", name: " 惡咒亡魂 魔騰 " },{ id: 12, user: "1228*****", name: " 炎爆 慎 " },{ id: 13, user: "1340*****", name: " 蒼穹之光 維克茲 " },{ id: 14, user: "3080*****", name: " 極度深寒 拉莫斯 " },{ id: 15, user: "1198*****", name: " 戰(zhàn)斗學院 永恩 " },{ id: 16, user: "9748*****", name: " 光明哨兵 艾瑞莉婭 " },{ id: 17, user: "1612*****", name: " 魔幻卡牌 崔斯特 " },{ id: 18, user: "9748*****", name: " 獵天使魔女 薇恩 " },{ id: 19, user: "2421*****", name: " 冰雪節(jié) 辛吉德 " },{ id: 20, user: "4039*****", name: " 霹靂游俠 弗拉基米爾 " },{ id: 21, user: "1915*****", name: " 奧術師 薩科 " },{ id: 22, user: "2864*****", name: " 屠龍勇士 圖奇 " },{ id: 23, user: "2864*****", name: " 虛空執(zhí)事 瑪爾扎哈 " },{ id: 24, user: "2864*****", name: " 銀河魔裝機神 菲茲 " },{ id: 25, user: "4039*****", name: " 糖果女巫 璐璐 " },{ id: 26, user: "1607*****", name: " 飛車暴走族 古拉加斯 " },{ id: 27, user: "1249*****", name: " 梅花國王 莫德凱撒 " },{ id: 28, user: "1249*****", name: " 野獸獵人 德萊文 " },{ id: 29, user: "1249*****", name: " 戰(zhàn)地之王 加里奧 " },{ id: 30, user: "4119*****", name: " 圣誕搗蛋鬼 金克絲 " },{ id: 31, user: "1249*****", name: " 雪默丁格 " },{ id: 32, user: "8772*****", name: " 黯晶戰(zhàn)神 賽恩 " },{ id: 33, user: "8772*****", name: " 持胡蘿卜的雪人 易 " },{ id: 34, user: "1781*****", name: " 綠茵門神 茂凱 " },{ id: 35, user: "4039*****", name: " 品酒大師 古拉加斯 " },{id: 36,user: "8772*****",name: " 五殺搖滾 III：遺失的章節(jié) 卡爾薩斯 "}];var marqueeListHtml = "";for (var i in processedCfg.marqueeList) {marqueeListHtml +="<span>用戶 " +processedCfg.marqueeList[i].user +" 抽中 " +processedCfg.marqueeList[i].name +" </span>";}document.getElementById("marqueeList").innerHTML = marqueeListHtml;scroll_div = document.getElementsByClassName("scroll_div")[0];scroll_begin = document.getElementsByClassName("scroll_begin")[0];scroll_end = document.getElementsByClassName("scroll_end")[0];if (scroll_begin && scroll_begin.offsetWidth > scroll_div.offsetWidth) {ScrollImgLeft();scroll_end.style.display = "inline-block";}// 文字橫向滾動function ScrollImgLeft() {var speed = 100; // 滾動速度var MyMar = null; // 計時器scroll_end.innerText = scroll_begin.innerText;function Marquee() {if (scroll_end.offsetWidth - scroll_div.scrollLeft <= 0) {scroll_div.scrollLeft -= scroll_begin.offsetWidth;} else {scroll_div.scrollLeft += 2;}}MyMar = setInterval(Marquee, speed);}}</script>

手寫實現(xiàn)跑馬燈【整體代碼】

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>走馬燈</title><style>.marquee-wrap {box-sizing: border-box;width: 814px;height: 36px;background-color: rgba(255, 255, 255, 0);background-image: linear-gradient(to left,rgba(255, 255, 255, 0),#dfbb7b,rgba(255, 255, 255, 0));line-height: 24px;font-size: 16px;text-align: center;border-radius: 5px;overflow: hidden;user-select: none;color: #181818;position: absolute;top: 290px;left: 58%;transform: translateX(-50%);}.scroll_div {white-space: nowrap;overflow: hidden;}.scroll_div pre {display: inline-block;height: 36px;margin: 0px;line-height: 36px;}</style></head><body><div class="marquee-wrap"><div class="marquee-content"><div class="scroll_div"><pre class="scroll_begin" id="marqueeList"></pre><pre class="scroll_end" style="display: inline-block"></pre></div></div></div><script>initMarquee();// 設置滾動var scroll_div = document.getElementsByClassName("scroll_div")[0];var scroll_begin = document.getElementsByClassName("scroll_begin")[0];var scroll_end = document.getElementsByClassName("scroll_end")[0];function initMarquee() {var processedCfg = {};// 假數(shù)據(jù)processedCfg.marqueeList = [{ id: 1, user: "2624*****", name: " 黯晶巨牛 阿利斯塔 " },{ id: 2, user: "2624*****", name: " 咖啡甜心 索拉卡 " },{ id: 3, user: "2624*****", name: " 防暴機器人 布里茨 " },{ id: 4, user: "2624*****", name: " 創(chuàng)世之神 內(nèi)瑟斯 " },{ id: 5, user: "2624*****", name: " 秩序之舌 塔姆 " },{ id: 6, user: "2624*****", name: " 攝魂男爵 弗拉基米爾 " },{ id: 7, user: "2624*****", name: " 傳統(tǒng)造型 特朗德爾 " },{ id: 8, user: "2624*****", name: " 夜行義賊 艾瑞莉婭 " },{ id: 9, user: "3012*****", name: " 海賊 瑞茲 " },{ id: 10, user: "3561*****", name: " 靈魂烈焰 布蘭德 " },{ id: 11, user: "1104*****", name: " 惡咒亡魂 魔騰 " },{ id: 12, user: "1228*****", name: " 炎爆 慎 " },{ id: 13, user: "1340*****", name: " 蒼穹之光 維克茲 " },{ id: 14, user: "3080*****", name: " 極度深寒 拉莫斯 " },{ id: 15, user: "1198*****", name: " 戰(zhàn)斗學院 永恩 " },{ id: 16, user: "9748*****", name: " 光明哨兵 艾瑞莉婭 " },{ id: 17, user: "1612*****", name: " 魔幻卡牌 崔斯特 " },{ id: 18, user: "9748*****", name: " 獵天使魔女 薇恩 " },{ id: 19, user: "2421*****", name: " 冰雪節(jié) 辛吉德 " },{ id: 20, user: "4039*****", name: " 霹靂游俠 弗拉基米爾 " },{ id: 21, user: "1915*****", name: " 奧術師 薩科 " },{ id: 22, user: "2864*****", name: " 屠龍勇士 圖奇 " },{ id: 23, user: "2864*****", name: " 虛空執(zhí)事 瑪爾扎哈 " },{ id: 24, user: "2864*****", name: " 銀河魔裝機神 菲茲 " },{ id: 25, user: "4039*****", name: " 糖果女巫 璐璐 " },{ id: 26, user: "1607*****", name: " 飛車暴走族 古拉加斯 " },{ id: 27, user: "1249*****", name: " 梅花國王 莫德凱撒 " },{ id: 28, user: "1249*****", name: " 野獸獵人 德萊文 " },{ id: 29, user: "1249*****", name: " 戰(zhàn)地之王 加里奧 " },{ id: 30, user: "4119*****", name: " 圣誕搗蛋鬼 金克絲 " },{ id: 31, user: "1249*****", name: " 雪默丁格 " },{ id: 32, user: "8772*****", name: " 黯晶戰(zhàn)神 賽恩 " },{ id: 33, user: "8772*****", name: " 持胡蘿卜的雪人 易 " },{ id: 34, user: "1781*****", name: " 綠茵門神 茂凱 " },{ id: 35, user: "4039*****", name: " 品酒大師 古拉加斯 " },{id: 36,user: "8772*****",name: " 五殺搖滾 III：遺失的章節(jié) 卡爾薩斯 "}];var marqueeListHtml = "";for (var i in processedCfg.marqueeList) {marqueeListHtml +="<span>用戶 " +processedCfg.marqueeList[i].user +" 抽中 " +processedCfg.marqueeList[i].name +" </span>";}document.getElementById("marqueeList").innerHTML = marqueeListHtml;scroll_div = document.getElementsByClassName("scroll_div")[0];scroll_begin = document.getElementsByClassName("scroll_begin")[0];scroll_end = document.getElementsByClassName("scroll_end")[0];if (scroll_begin && scroll_begin.offsetWidth > scroll_div.offsetWidth) {ScrollImgLeft();scroll_end.style.display = "inline-block";}// 文字橫向滾動function ScrollImgLeft() {var speed = 100; // 滾動速度var MyMar = null; // 計時器scroll_end.innerText = scroll_begin.innerText;function Marquee() {if (scroll_end.offsetWidth - scroll_div.scrollLeft <= 0) {scroll_div.scrollLeft -= scroll_begin.offsetWidth;} else {scroll_div.scrollLeft += 2;}}MyMar = setInterval(Marquee, speed);}}</script></body>
</html>