js实现弹出层鼠标跟随效果
本章节分享一段代码实例,它使用原生javascript实现了弹出层鼠标跟随效果。
代码实例如下:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>前端教程网</title> <style type="text/css"> #preview{ width:300px; height:200px; border:5px solid darkgoldenrod; background:#ccc; color:#fff; padding:5px; display:none; position:absolute; } #hover{ width:300px; height:200px; background:#ccc; text-align:center; line-height:200px; color:black; } </style> <script type="text/javascript"> window.onload=function(){ var xOffset = 10; var yOffset = 10; var hover=document.getElementById("hover"); var preview=document.getElementById("preview"); hover.onmouseover=function(ev){ var ev=window.event||ev; var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft; var scrollY = document.documentElement.scrollTop || document.body.scrollTop; preview.style.display="block"; preview.style.top=((ev.pageY?ev.pageY:ev.clientY + scrollY)+yOffset)+"px"; preview.style.left=((ev.pageX?ev.pageX:ev.clientX + scrollX)+xOffset)+"px"; } hover.onmouseout=function(ev){ preview.style.display="none"; } hover.onmousemove=function(){ var ev=window.event||ev; var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft; var scrollY = document.documentElement.scrollTop || document.body.scrollTop; preview.style.top=((ev.pageY?ev.pageY:ev.clientY + scrollY)+yOffset)+"px"; preview.style.left=((ev.pageX?ev.pageX:ev.clientX + scrollX)+xOffset)+"px"; } } </script> </head> <body> <div id="hover">鼠标放在这里</div> <div id='preview'>jquery实现跟随鼠标移动的弹层</div> </body> </html>
上面的代码实现了我们的要求,下面介绍一下它的实现过程。
一.代码注释:
(1).window.onload=function(){},当文档内容完全加载完毕再去执行函数中的代码。
(2).var xOffset = 10,用来规定弹出层距离鼠标指针的水平距离。
(3).var yOffset = 10,用来规定弹出层距离鼠标指针的垂直距离。
(4).var hover=document.getElementById("hover"),获取id属性值为hover的元素对象。(5).var preview=document.getElementById("preview"),获取id属性值为preview的元素对象。
(6).hover.onmouseover=function(ev){},注册onmouseover事件处理函数,参数ev是事件对象。
(7).var ev=window.event||ev,兼容所有浏览器的事件对象兼容。
(8).var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft,获取网页向上滚动的尺寸。
(9).var scrollY = document.documentElement.scrollTop || document.body.scrollTop,获取网页向左滚动的尺寸。
(10).preview.style.display="block",弹出层显示。
(11).preview.style.top=((ev.pageY?ev.pageY:ev.clientY + scrollY)+yOffset)+"px",设置弹出层的top属性值。
(12).preview.style.left=((ev.pageX?ev.pageX:ev.clientX + scrollX)+xOffset)+"px",设置弹出层的left属性值。
(13).hover.onmouseout=function(ev){
preview.style.display="none";
},当鼠标鼠标离开的时候,弹出层消失。
二.相关阅读:
(1).var ev=window.event||ev可以参阅var ev=window.event||ev的作用是什么一章节。
(2).document.documentElement.scrollLeft || document.body.scrollLeft可以参阅document.documentElement.scrollTop浏览器兼容一章节。
(4).clientY和clientX可以参阅javascript clientX一章节。
(5).onmouseout事件可以参阅javascript mouseout事件一章节。
(6).onmousemove事件可以参阅javascript mousemove事件一章节。