<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box { width: 600px; height: 650px; margin: auto; border: 5px solid grey; position: relative; }
.box>img { width: 600px; height: 600px; }
.slide { width: 50px; height: 50px; background: pink; position: absolute; bottom: 0; }
.shadow { width: 50px; height: 50px; position: absolute; /* left: 200px; top: 200px; */ background: rgba(255, 255, 255, .5); }
.block { width: 50px; height: 50px; position: absolute; /* top: 200px; */ left: 0; background: url(../img/index_04.jpg) no-repeat; background-size: 600px 600px; /* background-position: -200px -200px; */ } </style> </head>
<body> <div class="box"> <img src="../img/index_04.jpg" alt=""> <div class="shadow"></div> <div class="block"></div> <div class="slide"></div> </div> <script> var oBox = document.querySelector('.box') var oShadow = oBox.querySelector('.shadow') var oBlock = oBox.querySelector('.block') var oSlide = oBox.querySelector('.slide') var maxX = oBox.clientWidth - oSlide.offsetWidth var maxY = oBox.clientHeight - oSlide.offsetHeight randPosition() oSlide.onmousedown = function (e) { var e = e || event; // 计算鼠标距离小方块的左边距 var gapX = e.offsetX document.onmousemove = function (e) { var x = e.x - gapX - oBox.offsetLeft if (x < 0) x = 0; if (x > maxX) x = maxX oSlide.style.left = x + 'px' oBlock.style.left = x + 'px' } document.onmouseup = function () { document.onmousemove = null document.onmouseup = null if (Math.abs(oBlock.offsetLeft - oShadow.offsetLeft) <= 5) { location.href = 'http://www.baidu.com' } else { randPosition() oSlide.style.left = 0 } } } //生成随机位置 function randPosition() { var x = rand(320, maxX - 30) var y = rand(30, maxY - 80) oShadow.style.cssText = `left:${x}px;top:${y}px;` oBlock.style.cssText = `top:${y}px;background-position:${-x}px ${-y}px` } function rand(min, max) { return parseInt(Math.random() * (max - min) + min) } </script> </body>
</html>