版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/a727911438/article/details/69665891
动态弹出浮动窗口显示图片的效果是这样子的:
不多说,直接上代码:
<!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;
img.style.left = x + "px";
img.style.top = y + "px";
img.style.display = "block";
}
//图片消失
function vanishImg(){
var img = document.getElementById("image");
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=""><!--如果加上AJAX就可以根据不同的超链接来显示不同的图片了-->
</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在网页中的显示位置。