<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>js实现弹幕效果</title> <style> #play { width: 600px; height: 500px; background-color: #000; } /*方便js获取高度*/ #danmu{ width:600px; height:500px; background-color:#fff; z-index:9999; background-color: rgba(0, 1, 0, 0.1); } #textStyle { position: absolute; font-size: 24px; color: #ffffff; } </style> </head> <body> <div id="play"> <div id="danmu"></div> </div> <input type="text" id="text" value="这是弹幕..."/> <input type="button" value="发送" onclick="danmu()"/> <script src="jquery-3.1.0.min.js"></script> <script> var si; // 初始化定义定时器变量 function danmu() { // 每次执行弹幕函数的前清除一次定时器 clearInterval(si); var text = $('#text'); var danmu = $('#danmu'); var textStyle = '<span id="textStyle">' + text.val() + '</span>'; danmu.get(0).innerHTML = textStyle; var textTop = Math.round(Math.random()*danmu.height()) + 'px'; var textLeft = danmu.width() + 'px'; var textStyleObj = $('#textStyle'); textStyleObj.css({ 'left': textLeft, 'top': textTop }); var x = parseInt(textStyleObj.css('left')); //console.log(x); //textMove(x); var animateLeft = 600; si = setInterval(function () { if(animateLeft < -parseInt(textStyleObj.width())) { // 停止定时器，清空弹幕 clearInterval(si); danmu.text(''); //console.log('清除定时器'); }else { // 弹幕的left值减一 animateLeft--; //console.log(animateLeft); } textStyleObj.css('left', animateLeft + 'px'); }, 10); } </script> </body> </html>