JS实现鼠标移动拖尾
本文实例为大家分享了JS实现鼠标移动拖尾的具体代码,供大家参考,具体内容如下
JS代码
functiongetMousePos(event){
vare=event||window.event;
varmouseInfo={
mouseX:e.clientX,
mouseY:e.clientY
}
returnmouseInfo;
}
functiongetMouseArt(){
this.artStyle={
position:"fixed",
top:0,
left:0,
width:"50px",
height:"50px",
"font-size":0,
"color":0,
"text-transform":0
};
this.init=function(obj){
varcharacter=["你","真","的","爱","我","吗","喜","欢","不","对","起","彩","色","世","界","灰","?"];
varfont_trans=["uppercase","lowercase"];
this.Alpha=1;
this.element=document.createElement('div');
vartext=document.createTextNode(character[Math.floor(Math.random()*character.length)]);
this.element.appendChild(text);
this.addStyle(this.element,this.artStyle);
varoffsetV=Math.floor(Math.random()*60-30);//-30~30
this.element.style.left=obj.mouseX+offsetV+"px";//x
this.element.style.top=obj.mouseY+offsetV+"px";//y
this.element.style.fontSize=Math.floor(Math.random()*20+10)+"px";
this.element.style.color="hsla("+Math.floor(Math.random()*255)+",100%,50%,"+this.Alpha+")";
this.element.style.textTransform=font_trans[Math.floor(Math.random()*2)];
document.body.appendChild(this.element);
}
this.addStyle=function(ele,genuine){
for(varkingenuine){
ele.style[k]=genuine[k];
}
}
this.delElement=function(){
document.body.removeChild(this.element);
}
this.reduceColor=function(win){
if(this.Alpha<=1&&this.Alpha>0){
this.Alpha=this.Alpha-0.1;
this.element.style.color="hsla("+Math.floor(Math.random()*255)+",100%,50%,"+this.Alpha+")";
console.log(this.Alpha);
}
else{
clearInterval(win);
this.delElement();
}
}
}
document.onmousemove=function(event){
varobj=getMousePos(event);
varart=newgetMouseArt();
art.init(obj);
varwin=setInterval(function(){
art.reduceColor(win);
},30);
}
HTML代码
Document