DOM特效之鼠标更换图片和鼠标跟随

来源：互联网发布：建筑绘画软件编辑：程序博客网时间：2024/05/08 07:36

这段时间的在工作中的项目终于前端部分告一段落所以这次来总结一下这次的工作中遇到的一些特效首先是鼠标跟随的事情，我们知道在css中有一个通配符的样式是用来给所有的标签来定公共样式的，还有一个知识点就是锚伪类，我们知道a标签是有四个不同的状态一个是鼠标放上去显示鼠标点击时还有就是鼠标访问后的显示，但是其他的标签也有这个属性。

我们的这次鼠标跟随就是给所有的通配符的cursor属性添加背景图片，然后接下来就是鼠标跟随了，这里我们还要介绍一下我们所谓的三大系列offset系列、scroll系列、client系列还有补充到的page系列，。我们知道在

offsetLeft:当前元素距离左侧的像素(距离)
offsetTop:当前元素距离上面的像素(距离)
offsetWidth:当前元素在页面中的宽度
offsetHeight:当前元素在页面中的高度

offsetX和offsetY

scroll:
scrollLeft:元素内容卷曲出去的横向的宽度(left)
scrollTop:元素内容卷曲出去的竖着的高度(top)
scrollWidth:元素的内容的宽度
scrollHeight:元素的内容的高度

client:
clientX:可视区域的横坐标
clientY:可视区域的纵坐标
clientWidth:可视区域的宽度
clientHeight:可视区域的高度

pageX和pageY 就是距离浏览器的距离但是包括卷曲的距离，可以这么理解就是页面的距离，所以我们需要做用这个属性！

<style>        *{            padding: 0px;            margin: 0px;            cursor: url("images/cursor1.ico"), auto !important;        }        *:active{            cursor: url("images/cursor.ico"),auto !important;        }    </style>

window.onload=function(e){        for(var i=0;i<7;i++){            imgObj=document.createElement("img");            document.body.appendChild(imgObj);            var x=parseInt(Math.random()*50);            var y=parseInt(Math.random()*50);            imgObj.style.left= e.pageX+x+"px";            imgObj.style.top= e.pageY+y+"px";            imgObj.src="images/mouselogo.png";            imgObj.style.backgroundColor="red";            imgObj.className="img";        }    };    setInterval(function(){        document.onmousemove=function(e){            var imgObjs=document.getElementsByClassName("img");            document.body.removeChild(imgObjs[0]);            imgObj=document.createElement("img");            document.body.appendChild(imgObj);            imgObj.style.left=e.pageX+x-15+"px";            imgObj.style.top=e.pageY+y+30+"px";            var x=parseInt(Math.random()*50);            var y=parseInt(Math.random()*50);            var size=parseInt(Math.random()*12+8);            var deg=parseInt(Math.random()*360);            imgObj.style.position="absolute";            imgObj.style.left=e.pageX+x-15+"px";            imgObj.style.top=e.pageY+y+30+"px";            imgObj.style.backgroundColor="red";            imgObj.style.height=size+"px";            imgObj.style.transform="rotate(" +deg + "deg)";            imgObj.src="images/mouselogo.png";            imgObj.className="img";        }    },0.1);

一定要注意要脱离标准流！

0 0