js放大鏡效果
使用js實現放大鏡效果的原理：
這次將其中的一種方法，放大鏡其實並不是鼠標放到一張圖片的一個地方這張圖就會自動放大，這個只是一種視覺效果，其原理時準備兩張等比的圖一張大圖（放大後的圖，鼠標放到小圖上大圖纔會出現），一張小圖默認鼠標放上去的圖，鼠標在小圖上移動，大圖的對應位置也會移動，因此就出現了放大的效果。
如圖鼠標放入會出現一個黃色的透明盒子盒子區域會在右邊顯示出來放大效果。
1.具體實現黃色盒子和右邊的大盒子是默認隱藏的，鼠標移入小盒子display：block；出現這兩個盒子。
2.動畫實現的話用到了部分數學的知識，需要根據小盒子中的黃色盒子的位置等比的計算出大盒子中應該顯示的位置。
3.計算鼠標的位置也用到了部分數學的知識和關於獲取鼠標座標的方法
具體代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>放大鏡</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.box{
width: 350px;
height: 350px;
margin: 100px;
border: 1px solid #aaa;
position: relative;
}
.box .thumb{
width: 450px;
height: 450px;
border: 1px solid #aaa;
overflow: hidden;
position: absolute;
left: 355px;
top: 0;
display: none;
}
.box .normal .zoom{
width: 200px;
height: 200px;
background-color:#fdfa04;
opacity: 0.5;
position: absolute;
top: 0;
left: 0;
cursor: move;
display: none;
}
.thumb img{
position: absolute;
top: 0;
left: 0;
}
</style>
<script type="text/javascript">
function $(id){
return document.getElementById(id);
}
window.onload = function(){
var box = $('zoomDiv');
var normal = box.children[0];
var zoom = normal.children[1];
var thumb = box.children[1];
normal.onmouseover = function(){
zoom.style.display = 'block';
thumb.style.display = 'block';
}
box.onmouseout = function(){
zoom.style.display = 'none';
thumb.style.display = 'none';
}
var x = 0;
var y = 0;
normal.onmousemove = function(event){
var evt = event || windw.event;
//把鼠標在盒子中間顯示
x = evt.clientX - box.offsetLeft - zoom.offsetWidth/2;
y = evt.clientY - box.offsetTop - zoom.offsetHeight/2;
console.log(box.offsetLeft);
console.log(box.offsetTop);
//爲了黃色盒子不會超出小圖片
if(x < 0){
x = 0;
}else{
if(x>normal.offsetWidth - zoom.offsetWidth){
x = normal.offsetWidth - zoom.offsetWidth;
}
}
if(y < 0){
y = 0;
}else{
if(y>normal.offsetHeight - zoom.offsetHeight){
y = normal.offsetHeight - zoom.offsetHeight;
}
}
zoom.style.left = x + 'px';
zoom.style.top = y + 'px';
//應用到了數學思想，自己可以畫圖理解一下爲什麼
var detailX = - x*800/this.offsetWidth;
var detailY = - y*800/this.offsetHeight;
var detailImg = thumb.children[0];
detailImg.style.left = detailX + 'px';
detailImg.style.top = detailY + 'px';
}
}
</script>
</head>
<body>
<div class="box" id="zoomDiv">
<div class="normal">
<img src="imgs/show.jpg" alt="">
<div class="zoom"></div>
</div>
<div class="thumb">
<img src="imgs/detail.jpg">
</div>
</div>
</body>
</html>
圖片連接爲
需要使用的自取圖片大小和上面代碼中的一致（原素材）。
點擊進入獲取鼠標座標的使用