註釋： small img size：600x400 big img size：1200x800 原理： 問題： 居中理解太差： absolute ,left ,top,right,bottom,margin 放大縮小問題： 起初： transform： scale() 縮放 利用 transiti ...
註釋：
- small img size：600x400
- big img size：1200x800
- 大圖是小圖的 2倍整
- 大圖以小圖片中心點為中心
- transform : translate(-50%,-50%)
- (rate-0.5)*50%
- clip : rect(t,r,b,l) 以小圖邊界為邊界
- rect必須有absolute
- 獲取滑鼠在圖片中的位置
- 獲取滑鼠位置 XY
- 獲取圖片位置、寬度、高度
- 得到滑鼠在圖片的百分比位置
- 將百分比位置應用於大圖 left，top
- 居中理解太差：
- absolute ,left ,top,right,bottom,margin
- 放大縮小問題：
- 起初： transform： scale() 縮放
- 利用 transition 過渡
- 結果，採用這種方法會使得滑鼠移動時很卡頓
- 可能原因：每次hover 都會觸發 transition事件
- 解決方法：
- 採用了 Animate 動畫來實現縮放
- 以 onmouse 事件 e 動態獲得 e.pageX 和 e.pageY
- 以 $().offset().top /left 獲取圖片位置
- 以 $().width() /height() 獲取圖片寬高
- 在錯誤的操作中也忘了獲取 class 的方法
- $().attr("class")
- $().prop("class")
- event.traget.className
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>WEBGOD</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
#warpper{
margin: 0 auto;
padding: 0;
position: relative;
z-index: 1;
width: 600px;
height: 400px;
}
.small{
text-align: center;
}
.big{
display: none;
clip: rect(200px,900px,600px,300px);
position: absolute;
width: 1200px;
height: 800px;
top: 50%;
left:50%;
transform: translate(-50%,-50%);
}
.big img{
position: absolute;
width: 600px;
height: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
</style>
</head>
<body>
<div id="warpper">
<div class="small">
<img src="img/small_19.jpg"/>
</div>
<div class="big">
<img src="img/img_19.jpg"/>
</div>
</div>
<script type="text/javascript">
$(function(){
var x,y,left,top,width,height,imgWidth,imgHeight,rateX,rateY;
$("#warpper").hover(function(){
$(".big").css("display","block");
$(".big img").animate({"width":"1200px"},500);
},function(){
$(".big img").animate({"width":"600px"},1);
$(".big").css("display","none");
})
$("#warpper").on("mousemove",function(e){
x = e.pageX;
y = e.pageY;
top = $(".small img").offset().top;
left = $(".small img").offset().left;
width = $(".small img").width();
height = $(".small img").height();
//
imgWidth = $(".big img").width();
imgHeight = $(".big img").height();
rateX = (left+width-x)/width;
rateY = (top+height-y)/height;
if(rateX>0&&rateY>0&&rateX<=1&&rateY<=1){
$(".big img").css("left",(rateX-0.5)*50+"%");
$(".big img").css("top",(rateY-0.5)*50+"%");
}
})
})
</script>
</body>
</html>
