<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{margin: 0;padding:0;}
#div1 {width:800px;height:500px;position: absolute;left:100px;top:100px;}
#div1 img{width:100%;height:100%;}
#div2{width:400px;height:400px;border:1px solid black;overflow: hidden;display: none;
position: relative;float: right;left:-100px;top:150px;}
#div2 img{width:1600px;height:1000px;position: absolute;left:0;top:0;}
#mark{width:200px;height:200px; background-color:white;opacity: 0.5;float: left;position: absolute;left:0;top:0;display: none;}
</style>
<script>
window.onload = function(){
var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");
var mark = document.getElementById("mark");
var bigimg = div2.getElementsByTagName("img")[0];
div1.onmouseover= function(){
//把需要放大的图片和透明板显示
mark.style.display = 'block';
div2.style.display = 'block';
}
div1.onmousemove= function(ev){
var e = ev || window.event;
var l = e.clientX - div1.offsetLeft -100;
var t = e.clientY - div1.offsetTop -100;
//返单是否出界
if(l<=0){
l=0;
}
if(l>=600){
l=600;
}
if(t<=0){
t=0;
}
if(t>=300){
t=300;
}
//鼠标移动时 透明板跟着移动
mark.style.left = l +"px";
mark.style.top = t +"px";
//放大的板跟随移动 但是上面的2倍 并且是反方向的
bigimg.style.left = l*-2 +"px";
bigimg.style.top = t*-2 +"px";
}
div1.onmouseout= function(){
//鼠标移出 隐藏
mark.style.display = 'none';
div2.style.display = 'none';
}
}
</script>
</head>
<body>
<div id="div1">
<img src="girl.jpg" alt="">
<div id="mark"></div>
</div>
<div id="div2">
<img src="girl.jpg" alt="">
</div>
</body>
</html>
类似购物车的放大镜效果
最新推荐文章于 2022-08-17 20:41:50 发布