JS实现开枪特效

2015-4-18 12:30:50 人评论 次浏览 分类:过度特效

这几天思鹏因身体不舒服在家中休息,但是热爱技术的我没有被病痛所打倒,还在坚持学习新的技术。

开枪的这个特效其实我很早之前就想要做了,但是由于技术的原因一直没有实现,在这几天的休息中忽然灵感大发,想到了解决的方案,在这里分享给大家。

源代码:


document.onclick = function(e){
     //获取audioID
	 var audioId = document.getElementById("boom");
	 audioId.load();//重新加载音频
	 audioId.play();//播放音频
	 //动态创建div
	 var floorDiv = document.createElement('div');
	 //给创建的div赋予样式
	 floorDiv.style.width = "310px";
	 floorDiv.style.height = "280px";
	 floorDiv.style.background = "red";
	 floorDiv.style.borderRadius = "310px";
	 floorDiv.style.background = "url(1.png)";
	 //将创建好的DIV添加进body中
	 document.body.appendChild(floorDiv);
	 //获取鼠标当前坐标位
	 var x = e.clientX;
	 var y = e.clientY;
	 floorDiv.style.position = "absolute";
	 //将当前坐标位的值当做参数赋予元素的定位值
	 floorDiv.style.left = x-145 + "px";
         floorDiv.style.top = y-140 + "px";
	}
其实实现原理其实很简单,就是动态创建DIV并将其定位到鼠标当前坐标位,只不过我在其中加上了音乐的效果使得效果更加逼真。


在线演示:

http://sipeng.net/yanshi/index.html

源码下载:

开枪特效下载


上一篇:没有了

下一篇:Jquery实现时钟特效

共有访客发表了评论 网友评论

验证码: 看不清楚?