商品放大镜
<!DOCTYPE html>
<html>
<head lang&＃61;"en"><meta charset&＃61;"UTF-8"><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&＃61;"box" id&＃61;"box"><div class&＃61;"small"><!--小层--><img src&＃61;"images/small.png" width&＃61;"350" alt&＃61;""/><div class&＃61;"mask"></div><!--遮挡层--></div><!--小图--><div class&＃61;"big"><!--大层--><img src&＃61;"images/big.jpg" width&＃61;"800" alt&＃61;""/><!--大图--></div><!--大图-->
</div>
<!--导入外部的js文件-->
<script>var box &＃61; document.getElementById("box");var small &＃61; box.children[0];var mask &＃61; small.children[1];var big &＃61; box.children[1];var bigImg &＃61; big.children[0];box.onmouseover &＃61; function () {mask.style.display &＃61; "block";big.style.display &＃61; "block";};box.onmouseout &＃61; function () {mask.style.display &＃61; "none";big.style.display &＃61; "none";};small.onmousemove &＃61; function (e) {var x &＃61; e.clientX - mask.offsetWidth / 2;var y &＃61; e.clientY - mask.offsetHeight / 2;x &＃61; x - 100;y &＃61; y - 100;x &＃61; x < 0 ? 0 : x;y &＃61; y < 0 ? 0 : y;x &＃61; x > small.offsetWidth - mask.offsetWidth ? small.offsetWidth - mask.offsetWidth : x;y &＃61; y > small.offsetHeight - mask.offsetHeight ? small.offsetHeight - mask.offsetHeight : y;mask.style.left &＃61; x &＃43; "px";mask.style.top &＃61; y &＃43; "px";var maxX &＃61; bigImg.offsetWidth - big.offsetWidth;var bigImgMoveX &＃61; x * maxX / (small.offsetWidth - mask.offsetWidth);var bigImgMoveY &＃61; y * maxX / (small.offsetWidth - mask.offsetWidth);bigImg.style.marginLeft &＃61; -bigImgMoveX &＃43; "px";bigImg.style.marginTop &＃61; -bigImgMoveY &＃43; "px";};
</script></body>
</html>
京公网安备 11010802041100号