php+js实现弹幕,js构造对象实现弹幕功能

Document

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:010px;

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)

}

//页面加载完成后执行

window.onload = function() {//创建一个函数

functionbarrage(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);

}