网站设计的简称免费软件制作网站模板
目录
- 第三方实现跑马灯
- 手写实现跑马灯
- 手写实现跑马灯【整体代码】
- 自己细心研究一下上述代码
第三方实现跑马灯
- https://vue3-marquee.vercel.app/guide.html#changes-from-v2
- https://evodiaaut.github.io/vue-marquee-text-component/
手写实现跑马灯
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 = {};// 假数据processedCfg.marqueeList = [{ id: 1, user: "2624*****", name: " 黯晶巨牛 阿利斯塔 " },{ id: 2, user: "2624*****", name: " 咖啡甜心 索拉卡 " },{ id: 3, user: "2624*****", name: " 防暴机器人 布里茨 " },{ id: 4, user: "2624*****", name: " 创世之神 内瑟斯 " },{ id: 5, user: "2624*****", name: " 秩序之舌 塔姆 " },{ id: 6, user: "2624*****", name: " 摄魂男爵 弗拉基米尔 " },{ id: 7, user: "2624*****", name: " 传统造型 特朗德尔 " },{ 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: " 战斗学院 永恩 " },{ id: 16, user: "9748*****", name: " 光明哨兵 艾瑞莉娅 " },{ id: 17, user: "1612*****", name: " 魔幻卡牌 崔斯特 " },{ id: 18, user: "9748*****", name: " 猎天使魔女 薇恩 " },{ id: 19, user: "2421*****", name: " 冰雪节 辛吉德 " },{ id: 20, user: "4039*****", name: " 霹雳游侠 弗拉基米尔 " },{ id: 21, user: "1915*****", name: " 奥术师 萨科 " },{ id: 22, user: "2864*****", name: " 屠龙勇士 图奇 " },{ id: 23, user: "2864*****", name: " 虚空执事 玛尔扎哈 " },{ 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: " 战地之王 加里奥 " },{ id: 30, user: "4119*****", name: " 圣诞捣蛋鬼 金克丝 " },{ id: 31, user: "1249*****", name: " 雪默丁格 " },{ id: 32, user: "8772*****", name: " 黯晶战神 赛恩 " },{ id: 33, user: "8772*****", name: " 持胡萝卜的雪人 易 " },{ id: 34, user: "1781*****", name: " 绿茵门神 茂凯 " },{ id: 35, user: "4039*****", name: " 品酒大师 古拉加斯 " },{id: 36,user: "8772*****",name: " 五杀摇滚 III：遗失的章节 卡尔萨斯 "}];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>
手写实现跑马灯【整体代码】
<!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 = {};// 假数据processedCfg.marqueeList = [{ id: 1, user: "2624*****", name: " 黯晶巨牛 阿利斯塔 " },{ id: 2, user: "2624*****", name: " 咖啡甜心 索拉卡 " },{ id: 3, user: "2624*****", name: " 防暴机器人 布里茨 " },{ id: 4, user: "2624*****", name: " 创世之神 内瑟斯 " },{ id: 5, user: "2624*****", name: " 秩序之舌 塔姆 " },{ id: 6, user: "2624*****", name: " 摄魂男爵 弗拉基米尔 " },{ id: 7, user: "2624*****", name: " 传统造型 特朗德尔 " },{ 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: " 战斗学院 永恩 " },{ id: 16, user: "9748*****", name: " 光明哨兵 艾瑞莉娅 " },{ id: 17, user: "1612*****", name: " 魔幻卡牌 崔斯特 " },{ id: 18, user: "9748*****", name: " 猎天使魔女 薇恩 " },{ id: 19, user: "2421*****", name: " 冰雪节 辛吉德 " },{ id: 20, user: "4039*****", name: " 霹雳游侠 弗拉基米尔 " },{ id: 21, user: "1915*****", name: " 奥术师 萨科 " },{ id: 22, user: "2864*****", name: " 屠龙勇士 图奇 " },{ id: 23, user: "2864*****", name: " 虚空执事 玛尔扎哈 " },{ 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: " 战地之王 加里奥 " },{ id: 30, user: "4119*****", name: " 圣诞捣蛋鬼 金克丝 " },{ id: 31, user: "1249*****", name: " 雪默丁格 " },{ id: 32, user: "8772*****", name: " 黯晶战神 赛恩 " },{ id: 33, user: "8772*****", name: " 持胡萝卜的雪人 易 " },{ id: 34, user: "1781*****", name: " 绿茵门神 茂凯 " },{ id: 35, user: "4039*****", name: " 品酒大师 古拉加斯 " },{id: 36,user: "8772*****",name: " 五杀摇滚 III：遗失的章节 卡尔萨斯 "}];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>自己细心研究一下上述代码
Have a Nice Day~