js 實現放大鏡效果
當鼠標在設定的窗口內移動時 放大鏡區域內的圖片就會放大
</pre><pre name="code" class="html">代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.wrap {width: 1000px; height: 800px; border: 1px solid black; position: relative;}
.wrap img {width: 100%; height: 100%;}
.ball {width: 200px; height: 200px; border-radius: 55%; position: absolute; top: 0px; left: 0px; overflow: hidden; display: none;}
.ball img {width: 2000px; height: 1600px;}
</style>
</head>
<body>
<div class="wrap">
<img src="e7adcfd66005bc9c454c75c083c5c15f.jpg"/>
<div class="ball">
<img src="e7adcfd66005bc9c454c75c083c5c15f.jpg"/>
</div>
</div>
</body>
<script type="text/javascript">
//獲取元素
var wrap = document.querySelector('.wrap');
var ball = document.querySelector('.ball');
var ballImge = document.querySelector('.ball img');
//鼠標移入 放大鏡
wrap.onmousemove = function(){
ball.style.display = 'inline-block';
var ev = window.event || event;
//獲取鼠標當前位置 並使鼠標在放大鏡中間
var disX = ev.clientX - ball.offsetHeight / 2;
var disY = ev.clientY - ball.offsetWidth / 2 ;
var maxX = wrap.offsetWidth - ball.offsetWidth; //放大鏡X軸可移動的距離
var maxY = wrap.offsetHeight - ball.offsetHeight;//放大鏡Y軸可以動的距離
//判斷放大鏡的位置 不能移出 wrap的可視區域
if(disX <= 0){
disX = 0;
}
if(disX >= maxX){
disX = maxX;
}
if(disY <= 0){
disY = 0;
}
if(disY >= maxY){
disY = maxY;
}
//鼠標移動時改變放大鏡的位置
ball.style.top = disY + 'px';
ball.style.left = disX + 'px';
//放大鏡位置 與 它在wrap內可移動範圍的比例
var scaleX = ball.offsetLeft/(wrap.offsetWidth - ball.offsetWidth);
var scaleY = ball.offsetTop/(wrap.offsetHeight - ball.offsetHeight);
//通過比例改變 ball 內被隱藏掉的滾動條位置 實現放大功能
ball.scrollLeft = (ballImge.offsetWidth - ball.offsetWidth) * scaleX;
ball.scrollTop = (ballImge.offsetHeight - ball.offsetHeight) * scaleY;
}
//鼠標移出 隱藏放大鏡
ball.onmouseout = function(){
var ev = window.event || event;
ball.style.display = 'none';
}
</script>
</html>