JS 做的滑鼠放大鏡（初級）

最後更新：2016-08-12 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：

本人初級小白QAQ

這今天我們學習滑鼠的各種事件，我給大家分享一下滑鼠放大鏡的效果。

希望有興趣的朋友可以一塊交流。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>放大鏡效果</title>
<style media="screen">
*{
margin: 0;
padding: 0;
}
#wrap {
width: 400px;
height: 400px;
border: 1px solid black ;
position: absolute;
}
#image {
width: 100%;
height: 100%;
position: absolute;

}
#slider {
width: 150px;
height: 150px;
border: 1px solid gray ;
position: absolute;
/*top: 0;*/
background: rgba(255, 235, 0, 0.3);
display: none;
}
#wrap_max {
width: 700px;
height: 700px;
border: 1px solid gray ;
position: absolute;
left: 400px;
display: none;
overflow: hidden;

}
#image_max {
width: 1000px;
height: 1000px;
/*display: block;*/
}
</style>
</head>
<body>
<div id="wrap">
<img id="image"src="01.jpg" /> // 放置圖片
<div id="slider">

</div>
</div>
<div id="wrap_max">
<img id="image_max" src="01.jpg" /> //放置和上面一樣的圖片
</div>
</body>
<script type="text/javascript">
var wrap = document.getElementById(‘wrap‘);
var image = document.getElementById(‘image‘);
var slider = document.getElementById(‘slider‘);
var wrapMax = document.getElementById(‘wrap_max‘);
var imageMax = document.getElementById(‘image_max‘);

wrap.onmousemove = function(event){
event = event || window.event;
slider.style.display = ‘block‘; //當滑鼠移入wrap時，slider顯示。
wrapMax.style.display = ‘inline-block‘;
var disX = event.clientX - slider.offsetWidth / 2 ; // slider .offsetWidth/ 2 是讓滑鼠在slider的底部在中間顯示
var disY = event.clientY - slider.offsetHeight / 2; // slider .offsetHeight/2 是讓滑鼠在slider的高在中間顯示
var disMaxX = wrap.offsetWidth - slider.offsetWidth ; // slider在wrap移動的最大橫向距離
var disMaxY = wrap.offsetHeight - slider.offsetHeight ; // slider 在wrap中移動的最大縱向距離
if (disX < 0) {
disX = 0
}else if (disX > disMaxX) {
disX = disMaxX ;
}
if (disY < 0) {
disY = 0
}else if (disY > disMaxY) {
disY = disMaxY ;
}
slider.style.left = disX +‘px‘;
slider.style.top = disY + ‘px‘;
var sealeX = disX / disMaxX ; // slider在wrap x軸的移動比例
var sealeY = disY / disMaxY ; // slider 在 wrap y軸的移動比例
wrapMax.scrollLeft = (imageMax.offsetWidth - wrapMax.offsetWidth) * sealeX ; //wrapMax 在imageMax x 軸中的移動值
wrapMax.scrollTop = (imageMax.offsetHeight - wrapMax.offsetHeight) *sealeY ;

wrap.onmouseleave = function(){
slider.style.display = ‘none‘;
wrapMax.style.display = ‘none‘;
}
}

</script>
</html>

JS 做的滑鼠放大鏡（初級）

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More