JavaScript跟随鼠标移动的图片效果
分类:实例代码
JavaScript跟随鼠标移动的图片效果属于前端实例代码,有关更多实例代码大家可以查看。
本章节分享一段代码实例,它实现了图片跟随鼠标指针的效果。
代码实例如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>前端教程网</title> <style> #antzone{ position:absolute; } img{ width:150px; height:100px; } </style> <script type="text/javascript"> function DivFlying(ev){ var ev=window.event||ev; var odiv=document.getElementById("antzone"); if(!odiv){ return; } var intX=ev.clientX; var intY=ev.clientY; odiv.style.left=intX+"px"; odiv.style.top=intY+"px"; } document.onmousemove=DivFlying; </script> </head> <body> <div id="antzone"><img src="img/1.jpg"/></div> </body> </html>
上面的代码实现了我们的要求,下面介绍一下它的实现过程。
一.代码注释:
(1).function DivFlying(ev){},这个是onmousemove时间处理函数,参数是事件对象。
(2).var ev=window.event||ev,兼容所有浏览器的事件对象。
(3).var odiv=document.getElementById("antzone"),获取指定的元素对象。
(4).if(!odiv){
return;
},如果不存在指定元素,那么直接跳出函数。
(5).var intX=ev.clientX,获取鼠标指针在浏览器客户区的横坐标。
(6).var intY=ev.clientY,获取鼠标指针在浏览器客户区的纵坐标。
(7).odiv.style.left=intX+"px",设置元素的left属性值。
二.相关阅读:
(1).var ev=window.event||ev参阅var ev=window.event||ev的作用是什么一章节。
(2).clientX参阅javascript clientX一章节。
JavaScript跟随鼠标移动的图片效果,这样的场景在实际项目中还是用的比较多的,关于JavaScript跟随鼠标移动的图片效果就介绍到这了。