實現效果：
所用圖片：
代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>放大鏡效果</title>
<meta name="author" content="鬼眼邪神"/>
<meta name="description" content="鬼眼邪神的博客，http://cyg7561.blog.163.com/"/>
<style>
* {
margin:0;
padding:0;
}
.magnify {
float:left;
}
.left {
float:left;
position:relative;
width:190px;
height:240px;
border:5px solid #000;
}
.left img {
display:block;
width:190px;
height:240px;
}
.left div {
position:absolute;
top:0;
left:0;
display:none;
width:100px;
height:100px;
background:rgb(0,200,200);
cursor:move;
opacity:0.4;
filter:alpha(opacity=40);
}
.right {
display:none;
position:absolute;
top:0;
left:220px;
width:300px;
height:300px;
border:1px solid #000;
overflow:hidden;
}
.right img {
display:block;
width:570px;
height:720px;
}
</style>
<script>
window.οnlοad=function(){
var left=document.getElementById("left");
var move=document.getElementById("move");
var right=document.getElementById("right");
left.οnmοusemοve=function(event){
var event=window.event||event;
//讓濾鏡和右邊的大圖進行顯示
move.style.display="block";
right.style.display="block";
//獲取濾鏡相對於父元素的座標，並使鼠標在濾鏡中始終居中顯示
var moveLeft=event.clientX-move.offsetWidth/2-left.offsetLeft-left.clientLeft;
var moveTop=event.clientY-move.offsetHeight/2-left.offsetTop-left.clientTop;
//獲取濾鏡的移動範圍
var moveRangeWidth=left.clientWidth-move.offsetWidth;
var moveRangeHeight=left.clientHeight-move.offsetHeight;
//判斷臨界值
if (moveLeft<=0){
moveLeft=0;
}else if(moveLeft>=moveRangeWidth){
moveLeft=moveRangeWidth;
}
if (moveTop<=0){
moveTop=0;
}else if (moveTop>=moveRangeHeight){
moveTop=moveRangeHeight;
}
//讓鼠標帶着小塊移動
move.style.left=moveLeft+"px";
move.style.top=moveTop+"px";
//放大鏡效果
right.scrollLeft=moveLeft*3;
right.scrollTop=moveTop*3;
}
left.οnmοuseοut=function(){
right.style.display="none";
}
}
</script>
</head>
<body>
<div class="magnify">
<div class="left" id="left">
<img src="girl.jpg" alt="" id="leftImg"/>
<div id="move">
</div>
</div>
<div class="right" id="right">
<img src="girl.jpg" alt="" id="rightImg"/>
</div>
</div>
</body>
</html>
