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