标签：验证 50px oSlide height width var 滑动 oBox
<!DOCTYPE html> <html lang="en"><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>
标签：验证,50px,oSlide,height,width,var,滑动,oBox 来源： https://www.cnblogs.com/gyjjjjj/p/14984942.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。