<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {margin: 0;padding: 0;}
img {
vertical-align: top;
}
.box {
width: 350px;
height: 350px;
margin:100px;
border: 1px solid #ccc;
position: relative;
}
.big {
width: 450px;
height: 450px;
position: absolute;
top: 0;
left: 360px;
border: 1px solid #ccc;
overflow: hidden;
display: none;
}
.mask {
width: 100px;
height: 100px;
background: rgba(255, 255, 0, 0.4);
position: absolute;
top: 0;
left: 0;
cursor: move;
display: none;
}
.small {
position: relative;
}
.big img {
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div class="box" id="fdj">
<!--小盒子-->
<div class="small">
<img src="images/001.jpg" alt=""/>
<div class="mask"></div>
</div>
<div class="big">
<img src="images/0001.jpg" alt=""/>
</div>
</div>
</body>
</html>
<script>
var fdj = document.getElementById("fdj"); // 獲得最大的盒子
var small = fdj.children[0]; // 獲得small 小圖片 350盒子
var big = fdj.children[1]; // 獲得 大圖片 800 盒子
var mask = small.children[1]; // 小的黃色盒子
var bigImage = big.children[0]; // 大盒子裏面的圖片
small.onmouseover = function() { // 鼠標經過顯示出他們
mask.style.display = "block";
big.style.display = "block";
}
small.onmouseout = function() {
mask.style.display = "none";
big.style.display = "none";
}
// 鼠標在small 內移動
var x = 0;
var y = 0;
small.onmousemove = function(event) {
var event = event || window.event;
x = event.clientX - this.offsetParent.offsetLeft - mask.offsetWidth /2; // 再某個盒子內的座標
//alert(this.offsetLeft);
y = event.clientY - this.offsetParent.offsetTop - mask.offsetHeight /2;
if(x < 0)
{
x = 0;
}
else if(x > small.offsetWidth - mask.offsetWidth)
{
x = small.offsetWidth - mask.offsetWidth;
}
if(y<0)
{
y = 0;
}
else if(y > small.offsetHeight - mask.offsetHeight)
{
y = small.offsetHeight - mask.offsetHeight;
}
mask.style.left = x + "px";
mask.style.top = y + "px";
/*計算 ： 夫子 一頓喫 2個饅頭 嬌子 一頓 4個饅頭
問 夫子今天吃了 3個饅頭 嬌子應該喫幾個？ */
/*計算出他們的倍數 4 / 2 2倍
3 * 2 == 6個 */
/* 大圖盒子 / 小圖盒子 倍數
我們 再小圖移動的距離 * 倍數 == 大圖的位置*/
bigImage.style.left = -x * big.offsetWidth /small.offsetWidth + "px";
bigImage.style.top = -y * big.offsetHeight /small.offsetHeight + "px";
}
</script>
