弹幕就是不停得滚动,但是目前没法操作后台,也么数据。因此内容被我用数组的方法弄了部分假的数据,代码<!DOCTYPE html<html lang="en">
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> body { height: 3000px; } #wrap { position: relative; width: 1200px; height: 300px; background: rgba(215, 221, 222, 1); border-radius: 10px; margin: 50px auto; padding-top: 22px; overflow: hidden; } #wrap .list { position: absolute; box-sizing: border-box; padding: 0 10px; width: auto; height: 50px; overflow: hidden; color: #333; text-align: center; line-height: 50px; font-size: 14px; border-radius: 20px; background: rgba(237, 241, 242, 1) } </style> </head> <body> <!-- 最外层盒子,放置弹幕的区域 --> <div id="wrap"> <!-- 里面的每个小盒子,用来放置弹幕 --> </div> <script> // 页面加载完成后执行 window.onload = function() { // 创建一个函数 function barrage(top, right, num) { // 获取到最外层放置弹幕的盒子 var oWrap = document.getElementById("wrap"); this.top = top; this.right = right; this.timer = null; // 新建一个放弹幕内容的数组 var roll = ["今天是2019年11月8日", "今天天气晴朗", "适合出去玩耍", "无为大佬给我找找bug", "欢迎大家来济南玩"]; var len = roll.length; // 定义一个初始化方法 this.init = function() { this.oList = document.createElement("div"); this.oList.classList.add("list"); //创建一个类名为list的div oWrap.appendChild(this.oList); // 将类名为list的div添加到最外层的盒子 this.oList.style.top = this.top + "px"; this.oList.style.right = this.right + "px"; this.oList.innerHTML = roll[num % len]; }; // 设置方法,让弹幕滚动起来 this.roll = function() { //此处需要备份,因为进入setInterval之后this就是window了 var self = this; this.timer = setInterval(function() { self.right++; if (self.right > 1000) self.die(); self.oList.style.right = self.right + "px"; }, 10);
this.oList.onmouseover = function() { clearInterval(self.timer); } }; this.die = function() { // 清理定时器 clearInterval(this.timer); // 清除div oWrap.removeChild(this.oList); } //调用初始化方法 this.init(); // 调用滚动 this.roll(); } // 定义信号量 var num = 0; setInterval(function() { new barrage(Math.random() * 250, -160, num); num++; }, 2000); } </script> </body> </html>
效果大概如下
问题是这个有bug,没找出来。也没解决 当页面刷新之后换到另一个页面他会积累好多内容。然后整体移动至左边。希望有大佬提出改正方法。
谢谢!!!