鼠标小尾巴特效

BOM中的event子对象

浏览器的子对象event事件对象中
获取相对文档的距离 水平： event.clientX() 垂直： event.clientY()
获取相对屏幕的距离 水平： event.screenX() 垂直： event.screenY()
获取相对当前父级元素的距离 水平： event.offsetLeft() 垂直： event.offsetTop()

要获取鼠标的位置，即 水平： event.clientX() 垂直： event.clientY()

   var body = document.getElementsByTagName("body")[0];
   //给整个文档绑定一个鼠标移动事件
    document.onmousemove = function(event){
    // 设置兼容性
    	var event = event || window.event;
    //获取鼠标相对稳当的距离 x  y
    	var x = event.clientX;
    	var y = event.clientY;
    // 在页面创建一个标签，（这里是创建一个自定义标签abc ）
        var abc = document.createElement("div");
    // 设置标签的样式
        abc.style.border = "3px solid  rgba(150,150,150,0.5)";
        abc.style.borderRadius = "50%";
    // 由于要设置动画，设置left 和top，因此，必须要设置定位
        abc.style.position = 'absolute'
    // 设置标签的初始位置，即鼠标的当前位置
    	abc.style.top = y + "px";
        abc.style.left = x + "px";
    // 将新建的标签加到页面的 body标签中
        body.appendChild(abc);
    // 设置溢出隐藏，为了防止鼠标在移动的过程中会触发上下滚动条
    //但是在文档中有超出的地方就会不显示，，所以，尽量绑定到页面的大盒子中，而别绑定到body上
        body.style.overflow = 'hidden';
    	var count = 0;
        var timer = setInterval(function(){
     // 设置定时器 ，让每一次生成的标签，在一定的时间内增加宽度和高度，以及 相应的透明度 
        	count += 5;
            abc.style.width = count +"px";
            abc.style.height = count +"px";
            abc.style.opacity = (80-count)/80 ;
               
        }, 30)
    // 设置延时定时器， 在一定的时间后清除上面的定时器，让创建的标签不再进行变化
        setTimeout(function(){
            clearInterval(timer);
   // 并且删除创建的标签 ，当鼠标每一次在移动后，都会清除上一次创建的标签
            body.removeChild(abc)
        },300)
    }

注：定时器的作用：
循环定时器：是在鼠标移动的同时来改变创建的一个标签的样式；
延时定时器：是在鼠标移动同时，清除上一次所创建的标签，同时清除上面的循环定时器