jquery实现弹幕效果怎么移动

2025-05-14 23:46:31

推荐回答（1个）

回答1：

用jquery写了一个弹幕的小功能，供大家参考学习。

前端显示

[html] view plain copy

吐槽:

样式

[css] view plain copy

html,body{margin:0px;padding:0px;width: 100%;height:100%;font-family: "微软雅黑";font-size: 62.5%;background: #ccc;}
.boxDom {
width:100%;
height: 100%;
position: relative;
overflow: hidden;
}
.idDom {
width: 100%;
height: 60px;
background: #666;
position: fixed;
bottom: 0px;
}
.content {
display: inline-block;
width:430px;
height: 40px;
position: absolute;
left: 0px;
right: 0px;
top:0px;
bottom:0px;
margin:auto;
}
.title {
display: inline;
font-size: 4em;
vertical-align:bottom;
color:#fff;
}
.text {
border:none;
width:300px;
height: 30px;
border-radius: 5px;
font-size: 2.4em;
}
.btn {
width:60px;
height: 30px;
background: #f90000;
border:none;
color:#fff;
font-size: 2.4em;
}
.string {
width:300px;
height: 40px;
position: absolute;
overflow: hidden;
color:#000;
font-size: 4em;
line-height: 1.5em;
cursor: pointer;
white-space:nowrap;
}

JS

[javascript] view plain copy

$(function(){
var pageW=parseInt($(document).width()); //获取页面宽度
//alert(pageW);
var pageH=parseInt($(document).height()); //获取页面高度
var boxDom=$("#boxDom");
var btnDom=$("#btn");
var Top,Right;
var width;
width=pageW;
var colorArr=["#cfaf12","#12af01","#981234","#adefsa","#db6be4","#f5264c","#d34a74"];
btnDom.bind("click",auto);
function auto(){
var creSpan=$("");
var text=$("#text").val();
//alert(text);
creSpan.text(text);
//alert(creSpan.text());
Top=parseInt(pageH*(Math.random()));
var num=parseInt(colorArr.length*(Math.random()));
if(Top>pageH-90){
Top=pageH-90;
}
//creSpan.css({"top":Top,"right":-300,"color":colorArr[num]});
creSpan.css({"top":Top,"right":-300,"color":getRandomColor()});//扩展字幕颜色
boxDom.append(creSpan);
var spanDom=$("#boxDom>span:last-child");
//alert(spanDom.html());
spanDom.stop().animate({"right":pageW+300},10000,"linear",function(){
$(this).remove();
});
}
function getRandomColor(){
return '#' + (function(h){
return new Array(7 - h.length).join("0") + h;
})((Math.random() * 0x1000000 << 0).toString(16));
}
});