摘要：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>仿天貓商城圖片放大鏡效果</title> &nb
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>仿天貓商城圖片放大鏡效果</title>
<link rel="shortcut icon" href="static/images/logo.png" type="image/x-icon" />
<link rel="stylesheet" href="static/css/style.css" type="text/css">
<script type="text/javascript" src="static/js/jquery.js"></script>
<script type="text/javascript">
$(function(){
$('#big').hide();
$('#normal').mouseover(function(){
$('#show').show()
$('#big').show()
$(this).mousemove(function(yd){
//小方塊跟隨鼠標(biāo)移動(dòng)
$('#show').css(
{
'left':yd.pageX-$('#show').width()/2,
'top': yd.pageY-$('#show').height()/2
})
})
$('#normal').mousemove(function(e){
//獲取鼠標(biāo)的當(dāng)前位置
var x=e.clientx
var y=e.clienty
//獲取原圖窗口距離文檔的偏移位置
var dx=$('#normal').offset().left;
var dy=$('#normal').offset().top;
//計(jì)算鼠標(biāo)的相對(duì)位置
var sx=x-dx
var sy=y-dy
//小框得的寬高
var mw=$('#show').width()/2
var mh=$('#show').height()/2
//給入鼠標(biāo)移動(dòng)，小框移動(dòng)的距離
$('#show').css({
left:sx-mw+'px',
top:sy-mh+'px'
})
//控制小框框只能在原圖窗口范圍內(nèi)移動(dòng)
//獲取小框的偏移位置
var lw=$('#show').position().left;
var lh=$('#show').position().top;
var maxW=$('#normal').width()-$('#show').width()
var maxH=$('#normal').height()-$('#show').height()
//左
if(lw<=0){$('#show').css('left','0px')}
//右
if(lw>=maxW){$('#show').css('left',maxW+'px')}
//左
if(lh<=0){$('#show').css('top','0px')}
//右
if(lh>=maxH){$('#show').css('top',maxH+'px')}
//獲取小框的偏移位置
var lw=$('#show').position().left;
var lh=$('#show').position().top;
var newX=lw*3;
var newY=lh*3
$('#big').find('img').css({
'left':-newX+'px',
'top':-newY+'px'
})
})
})
$('#normal').mouseleave(function(){
$('#show').hide()
$('#big').hide()
})
})
</script>
</head>
<body>
<div id="normal">
<img src="static/images/5.jpg">
<div id="show"></div>
</div>
<div id="big">
<img src="static/images/5.jpg">
</div>
</body>
</html>*{
margin: 0px;
padding: 0px;
}
#normal{
width: 450px; /* 展示圖的長(zhǎng)寬 */
height: 450px;
border: 1px solid #000;
position: fixed;
left:20px;
top:20px;
}
#normal img{
width: 100%;
height:100%;
}
#show{
width: 150px; /* 放大鏡區(qū)域長(zhǎng)寬 */
height:150px;
background: #754930;
opacity: 0.4;
position: absolute;
display: none;
}
#big{
width: 450px; /* 放大鏡長(zhǎng)寬 */
height: 450px;
border: 1px solid #000;
position:relative;
left: 520px;
top: 20px;
overflow: hidden;
}
#big>img{
position: absolute;
width:1350px; /* 放大鏡內(nèi)部圖片的長(zhǎng)寬 */
height: 1350px;
}/* 放大鏡內(nèi)部圖片的長(zhǎng)寬/展示圖的長(zhǎng)寬=放大鏡長(zhǎng)寬/放大鏡區(qū)域長(zhǎng)寬 */
總結(jié)：對(duì)于這個(gè)案例，理解的時(shí)候比較繞，尤其是其中涉及到的距離。這幾個(gè)距離的區(qū)別以及結(jié)合absolute的使用。隱隱感覺(jué)理解了，但是好像還不是很清晰，需要再理解一下。
批改老師：韋小寶批改時(shí)間：2018-12-11 10:17:05
老師總結(jié)：恩！寫(xiě)的很不錯(cuò)！這個(gè)效果在各種商城項(xiàng)目中使用的最為頻繁！課后還要記得多多練習(xí)?。?