鼠标悬停动态弹出浮动窗口显示图片

最新推荐文章于 2023-08-11 17:03:24 发布

奶丶嘴丶

最新推荐文章于 2023-08-11 17:03:24 发布

阅读量9.7k

点赞数 2

动态弹出浮动窗口显示图片的效果是这样子的：

不多说，直接上代码：

[html] view plain copy

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js弹出窗</title>
<style>
a{
float: left;
margin-left:30px;
margin-top: 50px;
}
img{
width:400px;
border:black 1px solid;
}
#image{
position: absolute;
display: none;
}
</style>
<script>
//显示图片
function displayImg() {
var img = document.getElementById("image");
//var x = event.clientX + document.body.scrollLeft + 20;
//var y = event.clientY + document.body.scrollTop - 5;

           var e = event || window.event;
           var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;
           var scrollY = document.documentElement.scrollTop || document.body.scrollTop;
           var x = e.pageX || e.clientX + scrollX;
           var y = e.pageY || e.clientY + scrollY;

img.style.left = x + 180 + "px";
img.style.top = y - 150 + "px";
img.style.display = "block";
}
//图片消失
function vanishImg(imgId){ //theEvent用来传入事件，Firefox的方式
if(typeof(HTMLElement)!="undefined"){ //给firefox定义contains()方法，ie下不起作用
HTMLElement.prototype.contains=function(obj){
while(obj!=null&&typeof(obj.tagName)!="undefind"){ //通过循环对比来判断是不是obj的父元素
if(obj==this) return true;
obj=obj.parentNode;
}
return false;
};
}
var theEvent = arguments.callee.caller.arguments[0] || window.event
if (theEvent){
var browser=navigator.userAgent; //取得浏览器属性
if (browser.indexOf("Firefox")>0){ //如果是Firefox
if (document.getElementById(imgId).contains(theEvent.relatedTarget)) { //如果是子元素
return; //结束函式
}
}
//if (browser.indexOf("MSIE")>0){ //如果是IE
//if (document.getElementById(imgId).contains(event.toElement)) { //如果是子元素
//return; //结束函式
//}
// }
}
/*要执行的操作*/
var img = document.getElementById(imgId);
img.style.display = "none";
}
</script>
</head>
<body>
<a href="#" onmouseover="displayImg()" onmouseout="vanishImg()" onmousemove="displayImg()" >
鼠标移至这里显示图片
</a>
<a href="#" onmouseover="displayImg()" onmouseout="vanishImg()" onmousemove="displayImg()" >
鼠标移至这里显示图片
</a>
<a href="#" onmouseover="displayImg()" onmouseout="vanishImg()" onmousemove="displayImg()" >
鼠标移至这里显示图片
</a>
<a href="#" onmouseover="displayImg()" onmouseout="vanishImg()" onmousemove="displayImg()" >
鼠标移至这里显示图片
</a>
<div id="image">
<img src="XXXX.png" alt="">
</div>
</body>
</html>

这段代码很简单，基本谁都看得懂。不过其中有两个概念很容易被混淆，一个是 clientX 和 clientY，另一个是 scrollLeft 和 scrollTop。这两个属性经常使用，通过这两个属性，一个网页中的所有坐标尽在掌握之中。

（1）clientX 和 clientY 需配合 event 使用，用于触发鼠标事件时，获取鼠标在网页中的横和纵坐标。用W3C的解释是，clientX 事件属性返回当事件被触发时鼠标指针向对于浏览器页面（或客户区）的水平坐标；clientY 事件属性返回当事件被触发时鼠标指针向对于浏览器页面（或客户区）的垂直坐标。

（2）scrollLeft 和 scrollTop 常常配合 body 来使用，其中 scrollLeft是网页被卷去的左，scrollTop 是网页被卷去的高。问题来了，什么是“被卷去”？其可以理解为你看一个内容丰富的网页时，用鼠标往下滚轮滚动后，网页会有一部分被卷走了，然后出现往下新的部分。根据这一特性，通过 clientX + scrollLeft 就可以获取到当前鼠标基于整个网页的横坐标，通过 clientY + scrollTop 就可以获取到当前鼠标基于整个网页的纵坐标。

这段代码的核心是，设置要弹出的图片DIV为绝对定位，然后在js中动态修改样式中的 left 和 top 属性来控制DIV在网页中的显示位置。

entX与clientY是获取相对于当前屏幕的坐标，忽略了页面滚动因素，这在很多环境下很有用，但当我们需要考虑页面滚动，也就是相对于文档（body元素）的坐标时怎么办呢？只要加上滚动的位移就可以了。

在chrome可以通过document.body.scrollLeft，document.body.scrollTop计算出页面滚动位移，而在IE下可以通过document.documentElement.scrollLeft，document.documentElement.scrollTop

var e = event || window.event;
var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;
var scrollY = document.documentElement.scrollTop || document.body.scrollTop;
var x = e.pageX || e.clientX + scrollX; var y = e.pageY || e.clientY + scrollY;

最后建议：用onmouseenter和onmouseleave代替 onmouseover和onmouseout。

注：次博客转载一位大神而来，只是最近用到了这个功能，在他的基础上做了改进

奶丶嘴丶

关注

2
点赞
踩
28

收藏

觉得还不错? 一键收藏
1
评论
鼠标悬停动态弹出浮动窗口显示图片

动态弹出浮动窗口显示图片的效果是这样子的：不多说，直接上代码： [html] view plain copy&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;js弹出窗&
复制链接

扫一扫