<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <title>Title</title>
? ? <style>
? ? ? ? * {
? ? ? ? ? ? margin: 0;
? ? ? ? ? ? padding: 0;
? ? ? ? }
? ? ? ? .box {
? ? ? ? ? ? width: 350px;
? ? ? ? ? ? height: 350px;
? ? ? ? ? ? margin: 100px;
? ? ? ? ? ? border: 1px solid #ccc;
? ? ? ? ? ? position: relative;
? ? ? ? }
? ? ? ? .big {
? ? ? ? ? ? width: 400px;
? ? ? ? ? ? height: 400px;
? ? ? ? ? ? position: absolute;
? ? ? ? ? ? top: 0;
? ? ? ? ? ? left: 360px;
? ? ? ? ? ? border: 1px solid #ccc;
? ? ? ? ? ? overflow: hidden;
? ? ? ? ? ? /*display: none;*/
? ? ? ? }
? ? ? ? .mask {
? ? ? ? ? ? width: 175px;
? ? ? ? ? ? height: 175px;
? ? ? ? ? ? background: rgba(255, 255, 0, 0.4);
? ? ? ? ? ? position: absolute;
? ? ? ? ? ? top: 0px;
? ? ? ? ? ? left: 0px;
? ? ? ? ? ? cursor: move;
? ? ? ? ? ? display: none;
? ? ? ? }
? ? ? ? .small {
? ? ? ? ? ? position: relative;
? ? ? ? }
? ? </style>
</head>
<body>
<div class="box" id="box">
? ? <div class="small"><!--小層-->
? ? ? ? <img src="images/small.png" width="350" alt=""/>
? ? ? ? <div class="mask"></div><!--遮擋層-->
? ? </div><!--小圖-->
? ? <div class="big"><!--大層-->
? ? ? ? <img src="images/big.jpg" width="800" alt=""/><!--大圖-->
? ? </div><!--大圖-->
</div>
<!--導(dǎo)入外部的js文件-->
<!--<script src="common.js"></script>-->
<script>
? ? function my$(id) {
? ? ? ? return document.getElementById(id)
? ? }
? ? var small = my$("box").children[0];? //小圖
? ? var big = my$("box").children[1];? //大層
? ? var mask = small.children[1];? //遮擋層
? ? var bigImg = big.children[0];? //大圖
? ? my$("box").onmouseover = function () {
? ? ? ? big.style.display = "block";
? ? ? ? mask.style.display = "block";
? ? };
? ? my$("box").onmouseout = function () {
? ? ? ? big.style.display = "none";
? ? ? ? mask.style.display = "none";
? ? }
? ? small.onmousemove = function (e) {
? ? ? ? var x = e.clientX - parseInt(mask.offsetWidth / 2); //獲取鼠標(biāo)橫坐標(biāo)-遮罩層的寬度一半
? ? ? ? var y = e.clientY - parseInt(mask.offsetHeight / 2);//獲取鼠標(biāo)縱坐標(biāo)-遮罩層高度一半
? ? ? ? x = x - 100;? //小圖的margin值
? ? ? ? y = y - 100;//小圖的margin值
? ? ? ? x = x <= 0 ? 0 : x;? //橫坐標(biāo)最小值
? ? ? ? y = y <= 0 ? 0 : y;? ? //總坐標(biāo)最小值
? ? ? ? x = x > small.offsetWidth - mask.offsetWidth ? small.offsetWidth - mask.offsetWidth : x;? ? ? ? ? ? //橫坐標(biāo)最大值
? ? ? ? y = y > small.offsetHeight - mask.offsetHeight ? small.offsetHeight - mask.offsetHeight : y;? ? ? ? //縱坐標(biāo)最大值
? ? ? ? mask.style.left = x + "px";
? ? ? ? mask.style.top = y + "px";
? ? ? ? //小圖的移動(dòng)距離/大圖的移動(dòng)距離====小圖的最大移動(dòng)距離/大圖的最大移動(dòng)距離
? ? ? ? //大圖的移動(dòng)距離======小圖的移動(dòng)距離*大圖的最大移動(dòng)距離/小圖的最大移動(dòng)距離
? ? ? ? //大圖的橫向移動(dòng)距離
? ? ? ? console.log(bigImg.offsetWidth - big.offsetWidth)
? ? ? ? var bigx = x * (bigImg.offsetWidth - big.offsetWidth) / (small.offsetWidth - mask.offsetWidth);
? ? ? ? var bigy = y * (bigImg.offsetHeight - big.offsetHeight) / (small.offsetHeight - mask.offsetHeight);
? ? ? ? //大圖的縱向移動(dòng)距離
? ? ? ? bigImg.style.marginLeft = -bigx + "px";
? ? ? ? bigImg.style.marginTop = -bigy + "px";
? ? }
</script>
</body>
</html>
