<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>放大镜效果</title>
<style>
*{
margin:0;
padding:0;
}
#box{
position:fixed;
left:200px;
top:100px;
width:460px;
height:730px;
background:#ccc;
}
#shelter{
position:absolute;
width:460px;
height:730px;
border:1px solid #f00;
}
#shelter img{
width:460px;
height:730px;
}
#move{
position:absolute;
top:0;
left:0;
width:150px;
height:250px;
background:#333;
filter:alpha(opacity=20);
opacity:0.2;
}
#magnifier{
position:absolute;
left:550px;
top:-50px;
width:450px;
height:750px;
border:1px solid #0f0;
overflow:hidden;
}
#magnifier img{
position:absolute;
left:0;
top:0;
width:1380px;
height:2190px;
}
</style>
</head>
<body>
<div id="box">
<div id="shelter"> <!--遮罩层:避免放大滤镜闪烁-->
<img src="images/1.jpg" />
<div id="move"></div>
</div>
<div id="magnifier">
<img src="images/1.jpg" />
</div>
</div>
</body>
<script>
var oBox=document.getElementById('box');
var oShelter=document.getElementById('shelter');
var oMove=document.getElementById('move');
var oMagnifier=document.getElementById('magnifier');
//var aImg=oMagnifier.getElementsByTagName('img');
oShelter.οnmοusemοve=function(ev){
var ev=ev||event; //事件对象,存放事件的相关信息
var oW=oMove.offsetWidth/2;
var oH=oMove.offsetHeight/2;
//alert(oH);
var subX=ev.clientX-oBox.offsetLeft-oW;
var subY=ev.clientY-oBox.offsetTop-oH;
//alert(oBox.offsetLeft)
oMove.style.left=subX+'px'; //指针在滑块中央显示
oMove.style.top=subY+'px';
//alert(oW);
if(oMove.offsetLeft<=0){ //滑块的临界条件 左侧:left<0 left=0 上 top<0 top=0 右 left > 大宽度-小宽度
oMove.style.left=0+'px';
} //left = 大宽度-小宽度 下 top > 大高度 -小高度 top = 大高度 -小高度
if(oMove.offsetTop>=oShelter.offsetHeight-oMove.offsetHeight){
oMove.style.top=oShelter.offsetHeight-oMove.offsetHeight+'px';
}
if(oMove.offsetTop<=0){
oMove.style.top=0+'px';
}
if(oMove.offsetLeft>=oShelter.offsetWidth-oMove.offsetWidth){
oMove.style.left=oShelter.offsetWidth-oMove.offsetWidth+'px';
}
var x=oMove.offsetLeft/oShelter.offsetWidth; //比例: 滑块的left/遮罩层宽度*大Img宽度=大Img的left
var y=oMove.offsetTop/oShelter.offsetHeight; //同理
oMagnifier.children[0].style.left=-(oMagnifier.children[0].offsetWidth*x)+'px';
oMagnifier.children[0].style.top=-(oMagnifier.children[0].offsetHeight*y)+'px';
//alert(y);
}
</script>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>放大镜效果</title>
<style>
*{
margin:0;
padding:0;
}
#box{
position:fixed;
left:200px;
top:100px;
width:460px;
height:730px;
background:#ccc;
}
#shelter{
position:absolute;
width:460px;
height:730px;
border:1px solid #f00;
}
#shelter img{
width:460px;
height:730px;
}
#move{
position:absolute;
top:0;
left:0;
width:150px;
height:250px;
background:#333;
filter:alpha(opacity=20);
opacity:0.2;
}
#magnifier{
position:absolute;
left:550px;
top:-50px;
width:450px;
height:750px;
border:1px solid #0f0;
overflow:hidden;
}
#magnifier img{
position:absolute;
left:0;
top:0;
width:1380px;
height:2190px;
}
</style>
</head>
<body>
<div id="box">
<div id="shelter"> <!--遮罩层:避免放大滤镜闪烁-->
<img src="images/1.jpg" />
<div id="move"></div>
</div>
<div id="magnifier">
<img src="images/1.jpg" />
</div>
</div>
</body>
<script>
var oBox=document.getElementById('box');
var oShelter=document.getElementById('shelter');
var oMove=document.getElementById('move');
var oMagnifier=document.getElementById('magnifier');
//var aImg=oMagnifier.getElementsByTagName('img');
oShelter.οnmοusemοve=function(ev){
var ev=ev||event; //事件对象,存放事件的相关信息
var oW=oMove.offsetWidth/2;
var oH=oMove.offsetHeight/2;
//alert(oH);
var subX=ev.clientX-oBox.offsetLeft-oW;
var subY=ev.clientY-oBox.offsetTop-oH;
//alert(oBox.offsetLeft)
oMove.style.left=subX+'px'; //指针在滑块中央显示
oMove.style.top=subY+'px';
//alert(oW);
if(oMove.offsetLeft<=0){ //滑块的临界条件 左侧:left<0 left=0 上 top<0 top=0 右 left > 大宽度-小宽度
oMove.style.left=0+'px';
} //left = 大宽度-小宽度 下 top > 大高度 -小高度 top = 大高度 -小高度
if(oMove.offsetTop>=oShelter.offsetHeight-oMove.offsetHeight){
oMove.style.top=oShelter.offsetHeight-oMove.offsetHeight+'px';
}
if(oMove.offsetTop<=0){
oMove.style.top=0+'px';
}
if(oMove.offsetLeft>=oShelter.offsetWidth-oMove.offsetWidth){
oMove.style.left=oShelter.offsetWidth-oMove.offsetWidth+'px';
}
var x=oMove.offsetLeft/oShelter.offsetWidth; //比例: 滑块的left/遮罩层宽度*大Img宽度=大Img的left
var y=oMove.offsetTop/oShelter.offsetHeight; //同理
oMagnifier.children[0].style.left=-(oMagnifier.children[0].offsetWidth*x)+'px';
oMagnifier.children[0].style.top=-(oMagnifier.children[0].offsetHeight*y)+'px';
//alert(y);
}
</script>
</html>