实现功能类似淘宝查看商品功能
鼠标移动到a图查看b图的比例放大照片(首先要有两种1:2比例或更大的图)
重点:图片的定位:
absolute
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
event.clientX 鼠标相对文档的水平座标
event.clientY 鼠标相对文档的垂直座标
offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
offsetWhdth:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的宽度
scrollWidth:获取对象的滚动宽度
scrollHeight: 获取对象的滚动高度。
这些属性的加减
滚轮的高度如果没加的话 宽度一高就会出现问题所以滚轮必须加
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>放大镜</title>
<style>
*{
margin: 0;
padding: 0;
}
#box{
width:800px;
height: 800px;
position: relative;
margin: 150px;
}
#min,#max{
width: 400px;
height: 400px;
}
#min{
float: left;
}
#max{
overflow: hidden;
float: right;
position: absolute;
top:0;
left: 800px;
display: none;
}
#fu{
width: 200px;
height: 200px;
position: absolute;
left: 0;
top: 0;
background-color: blue;
opacity: 0.3;
display: none;
}
/*定位很重要 如果没定位就查看不了大图*/
#imgs{
position: absolute;
left: 0;
top:0;
}
</style>
</head>
<body>
<div id="box">
<div id="min">
<img src="imgs/min.jpg" alt="">
<div id="fu"></div>
</div>
<div id="max">
<img src="imgs/max.jpg" alt="" id="imgs">
</div>
</div>
<script>
var min=document.getElementById("min"),
fu=document.getElementById("fu"),
max=document.getElementById("max"),
box=document.getElementById("box"),
imgs=document.getElementById("imgs")
// alert(imgs.style.width)
imgs.style.width="800px"
min.onmousemove=function (e) {
fu.style.display="block"
max.style.display="block"
var scrollLeft = document.body.scrollLeft || document.documentElement.scrollLeft;
var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
// alert(fu.offsetWidth)
var x=e.clientX +scrollLeft- box.offsetLeft-fu.offsetWidth/2
var y=e.clientY +scrollTop-box.offsetTop-fu.offsetHeight/2
if(x<0){
x=0;
}else if(x>min.offsetWidth-fu.offsetWidth){
x=min.offsetWidth-fu.offsetWidth;
}
if(y<0){
y=0;
}else if(y>min.offsetHeight-fu.offsetHeight){
y=min.offsetHeight-fu.offsetHeight;
}
fu.style.left= x+"px"
fu.style.top=y+"px"
imgs.style.left = -2*x+"px"
imgs.style.top = -2*y+"px"
}
min.onmouseout=function () {
fu.style.display="none"
max.style.display="none"
}
</script>
</body>
</html>
时间： 2024-08-09 10:29:51