js-点击飘心效果

在我的一篇文章中说了，博客中可以添加点击页面上方飘心的效果，但是源码是压缩过的，看了一下知道了原作者实现效果的方法。但是由于里面的函数和变量全是字母看起来很不舒服，所以就自己重新封装了一下，就当是做一个备份，总会用到的！
当然了，这个用的是纯js，如果引入jq的话会更简单，但是它方便就方便在不想引入jq的环境里照样可以使用呀！

实现思路

• 点击页面任意地方，增加一个dom节点(我用的是div)
• 封装一个对象，用来实现上述要求
• 增加dom样式
• 增加定时器
• 加入分支，满足一定条件，移除该dom

js代码

var intrest= function(ms){	var t;				//定时器	var msg= "❤";		//文本内容	var _top= 2;		//默认移动速度	var op= 1;			//默认原透明度	var id= "mdiv"+ Math.random();		//定义id	//定义颜色	var cl= "rgba("+parseInt(Math.random()*255)+","+parseInt(Math.random()*255)+","+parseInt(Math.random()*255)+",";	//获取参数	this.ms= ms || {x:0,y:0};	//初始化	this.init= function(){		document.body.appendChild(this.dom());		t= setInterval(this.takeset, 1000/60);	};	//生成一个div	this.dom= function(){		var mdiv= document.createElement("div");		mdiv.id= id;		mdiv.innerHTML= msg;		mdiv.style.color= cl+ op+")";		mdiv.style.position= "fixed";		mdiv.style.fontSize= "24px";		mdiv.style.left= this.ms.x+ "px";		mdiv.style.top= this.ms.y+ "px"; 		mdiv.style.cursor= "pointer";		return mdiv;		};	//计时器调用方法	this.takeset= function(){		_top += .1;	//速度越来越快		op-= .03;	//透明度发生改变		var dom= document.getElementById(id);	//获取当前dom,不能直接用self.dom() ？？？ 不理解 T_T		var top= parseInt(dom.style.top);		var nowtop= (top- _top);		dom.style.setProperty("top", nowtop+ "px");		dom.style.color= cl+ op+")";		// 透明度小于.2移除定时器并移除dom		if(op <= .2){			clearInterval(t);			document.body.removeChild(dom);		};	};	this.init();}

调用方法

document.onclick= function(e){	var mouse= {		x: e.clientX,		y: e.clientY	};	new intrest(mouse);	};

总结

在写这个方法的过程中，遇到一个很怪的问题，就是在周期性计时器中，无论这么修改dom的样式，输出的this.dom().style中的值都不会发生改变？这个问题查了好长时间，但是没有有关这方面的内容讲解。所以第一次写的时候在周期计时器里面重新修改dom样式的时候，我就用的self.dom()后直接改，但是数据不停的替换，样式没有发生变化。。。
所以，只好给dom定义一个id，然后用id找到这个dom，最后才动起来。
现在还没有想明白怎么回事~~~
当然，这个也有弊端，就是在使用的时候，如果需要修改多个css参数，就很尴尬了，需要写好多个参数然后来进行赋值。比方说放大缩小就需要margin-left和width同时起作用才能控制，而且要注意同步。