abstrait：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>仿天貓商品放大鏡</title> </head> <link rel="stylesheet" href=&q
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>仿天貓商品放大鏡</title>
</head>
<link rel="stylesheet" href="./static/css/style.css">
<script type="text/javascript" src="./static/js/jquery.js"></script>
<body>
<input type="text">pagexy
<input type="text">clientxy
<input type="text">小圖偏移
<div>
<img src="./static/img/5.jpg" alt="">
<div></div>
</div>
<div>
<img src="./static/img/5.jpg" alt="">
</div>
</body>
<script type="text/javascript">
$(function(){
$('.img2').hide();
$('.img_show').hide();
$('.img').mouseover(function(){
$('.img2').show();
$('.img_show').show();
$(this).mousemove(function(xy){
$()
// 鼠標(biāo)跟隨
$('.text').val('x:'+xy.pageX+' y:'+xy.pageY)
$('.text2').val('x:'+xy.clientX+' y:'+xy.clientY)
// 移動(dòng)范圍
var img_show_width = $('.img_show').width()/2
var img_show_height = $('.img_show').height()/2
// 鼠標(biāo)偏移
var mouseX = xy.pageX;
var mouseY = xy.pageY;
//原圖片偏移
var imgX = $('.img').offset().left;
var imgY = $('.img').offset().top;
//小方塊中心偏移位置
var img_showX = mouseX -imgX;
var img_showY = mouseY -imgY;
//范圍限制
var img_show_righ = $('.img').width()-$('.img_show').width()/2
var img_show_bottom = $('.img').height()-$('.img_show').height()/2
//左停留
if(img_showX < img_show_width){
img_showX = img_show_width
} //上停留
if(img_showY <img_show_height){
img_showY=img_show_height
}
//右停留
if(img_showX >img_show_righ){
img_showX = img_show_righ
}
//下停留
if(img_showY >img_show_bottom){
img_showY = img_show_bottom
}
$('.img_show').css({
'left':img_showX-($('.img_show').width()/2),
'top':img_showY-($('.img_show').height()/2)
})
//小圖當(dāng)前位置偏移
var img_show_offsetX = $('.img_show').position().left;
var img_show_offsetY = $('.img_show').position().top;
//右圖3倍顯示,大圖隨小框移動(dòng)方面相反需用負(fù)數(shù)
var right_imgX = img_show_offsetX *-3
var right_imgY = img_show_offsetY *-3
$('.img2 img').css({
'left':right_imgX,
'top':right_imgY
})
$('.text3').val('x:'+img_show_offsetX+' y:'+img_show_offsetY)
})
})
$('.img').mouseleave(function(){
$('.img2').hide();
$('.img_show').hide();
})
})
</script>
</html>*{margin: 0px;
padding: 0px;
}
.img,.img2{
width: 450px;
height: 450px;
border:1px solid #000;
margin: 100px;
float: left;
position: relative;
}
.img img{
width: 450px;
height: 450px;
}
.img_show{
background: rgba(0,0,0,0.3);
width: 150px;
height: 150px;
position: absolute;
top: 0px;
left:0px;
}
.img2{
overflow: hidden;
}
.img2 img{
width:1350px;
height: 1350px;
position: absolute;
}
本章節(jié)主要難點(diǎn)是pageX、pageY，offset(),clientX,clientY.經(jīng)過這一章節(jié)練習(xí)后能真正理解頁面坐標(biāo)關(guān)系。pageX，pageY 等同于offset()是相對當(dāng)前文檔坐標(biāo)值。clientX,clientY 則是相對可視范圍內(nèi)的坐標(biāo)關(guān)系，當(dāng)頁面有滾動(dòng)條時(shí)可忽略不可見那一部分距離。而pageX，pageY，offset()則包括不可觀區(qū)域的距離值。
Professeur correcteur：滅絕師太Temps de correction：2019-03-25 09:32:34
Résumé du professeur：有好好練習(xí)和分析老師代碼,完成的很好!繼續(xù)加油!