网络安全检测|网络安全服务|网络安全扫描-香港墨客投资移动版

主页 > 业界资讯 > ddos防御

手把手教你一个简单弹幕实现

(function(){
varroot=this;
vararray=[];
varpush=array.push;
varslice=array.slice;
varsplice=array.splice;
// The top-level namespace.
varBarrage;
if(typeof exports!=='undefined'){
Barrage=exports;
}else{
Barrage=root.Barrage={};
}
// Current Version of Barrage
Barrage.VERSION='0.0.1';
// extends the jquery
Barrage.$=root.jQuery;
Barrage.config={
'color':['red','blue','black','orange','white'],
'font_family':['Monaco'],
'font_size':['18px','20px','24px','28px'],
'speed':[10000,9000,8000,7000,6000,5000,4000]
};
Barrage.random=function(len){
returnMath.random()*len;
};
varbullet=Barrage.bullet=(function(){
var_font_family;
var_font_size;
var_color;
var_speed;
var_x_pos;
var_y_pos;
varrandom_render=function(config_item){
returnconfig_item[Math.floor(Barrage.random(config_item.length))];
};
varlaunch=function(objects,pose){
_font_size=objects.font_size||random_render(Barrage.config.font_size);
_font_family=objects.font_family||random_render(Barrage.config.font_family);
_color=objects.color||random_render(Barrage.config.color);
_speed=objects.speed||random_render(Barrage.config.speed);
_y_pos=objects.y_pos||Math.random()*window.innerHeight;
console.log(_font_size);
console.log(_font_family);
console.log(_color);
console.log(_speed);
console.log(_y_pos);
console.log("=============");
if(!objects.content)return;
varwords=Barrage.$("<b>"+objects.content+"</b>");
words.css("font-size",_font_size);
words.css("font-family",_font_family);
words.css("color",_color);
words.css("right",0);
words.css("position","absolute");
words.css("top",_y_pos);
words.attr("zoom",1000);
$("body").append(words);
Barrage.$(words).animate({
"right":window.innerWidth
},_speed,function(){
console.log("finished!");
});
};
return{
launch:launch
};
})();
varAction=Barrage.Action={
};
}).call(this);

test.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript"src="jquery-2.1.0.js"></script>
<script type="text/javascript"src="barrage.js"></script>
</head>
<body>
<divstyle="width:100%; height:100%;">
</div>
</body>
<script type="text/javascript">
varheitan={};
heitan.y_pos=300;
heitan.content="1111";
Barrage.bullet.launch(heitan,"");
varheitan={};
heitan.y_pos=350;
heitan.content="12222!";
Barrage.bullet.launch(heitan,"");
varheitan={};
heitan.y_pos=150;
heitan.content="3333!";
Barrage.bullet.launch(heitan,"");
varheitan={};
heitan.y_pos=20;
heitan.content="44444!!!!";
Barrage.bullet.launch(heitan,"");
</script>
</html>
【提醒】test.html的jquery,和body里的图片请自行替换,还有一份php+js+ajax的简单实现的版本,有需要的朋友请关注


千锋PHP-PHP培训的实力派

(责任编辑:admin)