<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>放大鏡</title>
<style>
#leftWrap{
position: relative;
width: 300px;
height: 300px;
border: 1px solid black;
float: left;
}
#leftWrap img{
width: 300px;
height: 300px;
position: absolute;
}
#slider{
width: 150px;
height: 150px;
background: rgba(0,0,0,0.5);
position: absolute;
top: 0;
left: 0;
cursor: pointer;
display: none;
}
#rightWrap{
position: relative;
width: 300px;
height: 300px;
border: 1px solid black;
float: left;
left: 50px;
display: none;
overflow: hidden;
}
#img1{
width: 600px;
height: 600px;
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div id="leftWrap">
<img src="img/2.jpg" alt="">
<div id="slider"></div>
</div>
<div id="rightWrap">
<img src="img/2.jpg" alt="" id="img1">
</div>
</body>
<script>
var leftWrap=document.getElementById('leftWrap');
var rightWrap=document.getElementById('rightWrap');
var img1=document.getElementById('img1');
var slider=document.getElementById('slider');
var maxImg=rightWrap.children[0];
// 鼠標(biāo)放在左邊時(shí)右邊顯示
leftWrap.onmousemove=function(event){
rightWrap.style.display="block";
slider.style.display='block';
// 獲取鼠標(biāo)左右移動(dòng)
var event=event||window.event;
// 獲取slider的寬度
// var sliderWidth=slider.offsetWidth;
// 當(dāng)前鼠標(biāo)的坐標(biāo)點(diǎn)=可視區(qū)的距離-容器的偏移量
var disX=event.clientX-leftWrap.offsetLeft;
// 鼠標(biāo)點(diǎn)在slider的中心
var x=disX-(slider.offsetWidth/2);
// 獲取slider移動(dòng)的最大寬度
var maxWidth=leftWrap.clientWidth-slider.offsetWidth;
if (x<=0) {
x=0;
}else if (x>=maxWidth) {
x=maxWidth;
}
slider.style.left=x+"px";
// 獲取鼠標(biāo)上下移動(dòng)
// 獲取slider的高度
// var sliderHeight=slider.offsetHeight;
// 獲取鼠標(biāo)的坐標(biāo)點(diǎn)=可視的高度-容器距離上部的距離
var disY=event.clientY-leftWrap.offsetTop;
//讓鼠標(biāo)點(diǎn)在slider的中心
var y=disY-(slider.offsetHeight/2);
// 獲取最大移動(dòng)高度
var maxHeight=leftWrap.clientHeight-slider.offsetHeight;
if (y<=0) {
y=0;
}else if (y>=maxHeight) {
y=maxHeight;
}
slider.style.top=y+"px";
// 偏移的比例
var scaleX=x/maxWidth;
var scaleY=y/maxHeight;
img1.style.left=-(maxImg.offsetWidth-rightWrap.offsetWidth)*scaleX+"px";
img1.style.top=-(maxImg.offsetHeight-rightWrap.offsetHeight)*scaleY+"px";
}
// 鼠標(biāo)離開(kāi)時(shí)左邊消失
leftWrap.onmouseout=function(){
rightWrap.style.display="none";
slider.style.display='none';
}
</script>
</html>
放大鏡的難點(diǎn):
1.onmousemove的使用
2.slider的寬高的比例
4.事件的獲取