鼠标动画脚本
谁都想拥有一个自己写的一个脚本，作为小白的我写出了第一个自己的鼠标动画脚本样式✌ 。
(在下一篇的链接中有运用到.)
代码如下：
<body>
<script src="js/xzx_mousemove.js"></script>
</body>
var body = document.getElementsByTagName("body")[0];
var bigdiv = document.createElement("div");
// 让超出部分隐藏不然会溢出滚动条
body.style.margin = "0px";
bigdiv.style.position = "absolute";
bigdiv.style.left = "0";
bigdiv.style.top = "0";
bigdiv.style.overflow = "hidden";
bigdiv.style.zIndex = "-999";
bigdiv.style.margin = "0px";
body.appendChild(bigdiv);
//鼠标移动事件 移动就生成一个div
window.onmousemove = function(e){
bigdiv.style.width = "100%";
bigdiv.style.height = window.innerHeight + window.pageYOffset + "px";
var x = 0;
var div = document.createElement("div");
div.style.position = "absolute";
div.style.left = e.clientX + window.pageXOffset + "px";
div.style.top = e.clientY + window.pageYOffset+"px";
//生成的div运用定位改变位置为鼠标的位置
div.style.border = "2px solid #155397";
div.style.borderRadius = "50%";
bigdiv.appendChild(div);
//生成div后运用定时器给它不停增加大小和透明度
var time = setInterval(function(){
x += 5;
div.style.opacity = (50 - x)/50;
div.style.width = (x + 10) + "px";
div.style.height = (x + 10) + "px";
},30);
//在执行大概十次定时器之后运行延时定时器清除定时器和div
setTimeout(function(){
clearInterval(time);
bigdiv.removeChild(div);
},300)
}
脚本要写在一个透明的遮罩层上，全部用js添加div和样式：
1.首先找到body，里面添加一个遮罩层，让遮罩层获得实时的页面实时的宽高，多出部分隐藏不然到时候后面鼠标滑倒边缘位置生成div会出现滚动条。
bigdiv.style.overflow = "hidden";
2.写鼠标移动事件onmousemove，在每次移动的时候通过e.clientX和e.clientY找到鼠标当前位置并生成一个圆(borderRadius=50%)，赋予它基本的样式。
div.style.left = e.clientX + "px";
div.style.top = e.clientY + "px";
3.在生成圆之后设置一个定时器setInterval，让div定时匀速改变透明度和大小样起到圆形的渐变效果。
var time = setInterval(function(){
x += 5;
div.style.opacity = (50 - x)/50;
div.style.width = (x + 10) + "px";
div.style.height = (x + 10) + "px";
},30);
4.最后再设置一个执行10次定时器之后触发的延时定时器，让增长过后的圆形消失，清除定时器并删除生成的圆。
setTimeout(function(){
clearInterval(time);
bigdiv.removeChild(div);
},300)
~~~~~~ end ~~~~~~
