摘要：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href=""/>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href=""/>
</head>
<style type="text/css">
*{margin: 0;padding: 0;}
.normal{height: 350px;width: 350px;position: fixed;top: 30px;left: 30px;border: 1px solid #000000;}
.normal img{height: 350px;width: 350px;}
.area{height: 100px;width: 100px;background:#CCCCCC;opacity: 0.4;position: absolute;}
.bigger{height: 350px;width: 350px;border: 1px solid #000000;position: relative;top: 30px;left: 410px;overflow: hidden;}
.bigger img{height: 1150px;width:1150px;position: absolute;}
</style>
<body>
<div class="normal">
<img src="1.jpg" alt="" />
<div class="area"></div>
</div>
<div class="bigger">
<img src="1.jpg"/>
</div>
</body>
<script src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(function(){
$('.area').hide();
$('.bigger').hide();
$('.normal').mouseover(function(){
$('.area').show();
$('.bigger').show();
//小方塊跟隨鼠標(biāo)移動(dòng)而移動(dòng)
$('.normal').mousemove(function(xy){
$('.area').css({
'left':xy.pageX-$('.area').width()/2,
'top':xy.pageY-$('.area').height()/2
})
})
$('.normal').mousemove(function(e){
//獲取鼠標(biāo)的當(dāng)前位置
var x=e.clientX;
var y=e.clientY;
//獲取原圖窗口距文檔的偏移距離 offset()方法
var nx=$('.normal').offset().left;
var ny=$('.normal').offset().top;
//獲取鼠標(biāo)相對(duì)與原圖窗口的位置
var sx=x-nx;
var sy=y-ny;
//鼠標(biāo)相對(duì)小框的一半
var ax=$('.area').width()/2;
var ay=$('.area').height()/2;
//鼠標(biāo)移動(dòng)時(shí)小框移動(dòng)的距離
$('.area').css({
left:sx-ax+'px',
top:sy-ay+'px'
})
//獲取小框的偏移位置
var px=$('.area').position().left;
var py=$('.area').position().top;
//獲取右邊框（邊框最大寬度）的位置
var maxw=$('.normal').width()-$('.area').width();
//獲取下邊框（邊框最大高度）的位置
var maxh=$('.normal').height()-$('.area').height();
//鼠標(biāo)超過(guò)左邊框時(shí)，left=0
if(px<=0){
$('.area').css('left','0px')
}
//鼠標(biāo)超過(guò)上邊框時(shí)，top=0
if(py<=0){
$('.area').css('top','0px')
}
//鼠標(biāo)超過(guò)最大寬度（右邊框）時(shí)，left=maxw
if(px>=maxw){
$('.area').css('left',maxw+'px')
}
//鼠標(biāo)超過(guò)最大高度（下邊框）時(shí)，top=maxh
if(py>=maxh){
$('.area').css('top',maxh+'px')
}
//獲取小框的偏移位置
var px=$('.area').position().left;
var py=$('.area').position().top;
//當(dāng)前小框的偏移位置*3作為放大后圖片的偏移位置
var bx=px*3;
var by=py*3;
$('.bigger').find('img').css({
'left':-bx+'px',
'top':-by+'px'
})
})
})
$('.normal').mouseleave(function(){
$('.area').hide();
$('.bigger').hide();
})
})
</script>
</html>請(qǐng)問老師這里為啥是負(fù)值呀，有點(diǎn)沒搞清楚哇
$('.bigger').find('img').css({
'left':-bx+'px',
'top':-by+'px'
})
批改老師：滅絕師太批改時(shí)間：2019-02-28 09:28:18
老師總結(jié)：因?yàn)樾】虻钠莆恢玫钠鹗贾凳亲笊辖茄?移動(dòng)的話就是向右移動(dòng)