滑动解锁
<!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: 500px;
background-color: #ddd;
margin: 40px auto;
position: relative;
}
.content{
height: 450px;
background: url(1.jpg);
background-size: 600px 450px;
position: relative;
}
.shadow{
width: 50px;
height: 50px;
background-color: #f00;
border:1px solid black;
position: absolute;
/* left: 300px;
top: 192px; */
}
.tips{
width: 50px;
height: 50px;
background: url(1.jpg);
background-size: 600px 450px;
position: absolute;
left: 0;
/* top: 192px; */
box-shadow: 0 0 3px blue;
/* background-position: -300px -192px; */
}
.block{
width: 50px;
height: 50px;
background-color: #000;
position: absolute;
bottom: 0;
left: 0;
}
</style>
</head>
<body>
<div class="box">
<div class="content">
<div class="shadow"></div>
<div class="tips"></div>
</div>
<div class="block"></div>
</div>
<script>
// 随机位置
// shadow 红色小块的位置 left / top
// tips 带图的小块 top / background-position
var oContent = document.querySelector('.content') ;
console.log(oContent.clientWidth)
var oShadow = document.querySelector('.shadow') ;
console.log(oShadow.clientWidth)
var oTips = document.querySelector('.tips') ;
var oBlock = document.querySelector('.block') ;
//获取小图标的盒子的可以在大的背景图片里面的最大的width和height
var maxLeft = oContent.clientWidth - oShadow.offsetWidth ;
var maxTop = oContent.clientHeight - oShadow.offsetHeight ;
setPosition()
oBlock.onmousedown = function(e) {
var e = event || e ;
var gaPx = e.x - oContent.offsetLeft ;
document.onmousemove = function(e) {
var e = event || e ;
var left = e.x - gaPx ;
oBlock.style.left = left + 'px';
oTips.style.left = left + 'px' ;
}
}
//鼠标在页面的随机点击生成一个位置
document.onmouseup = function() {
document.onmousemove = null ;
// 允许误差值的范围
if(Math.abs(oTips.offsetLeft - oShadow.offsetLeft) <= 2) {
alert(666)
}
else {
setPosition();
oBlock.style.left = 0;
oTips.style.left = 0 ;
}
}
//随机获取一个图标的位置
function setPosition() {
var x =20+ parseInt(Math.random() * maxLeft) ;
var y =20+ parseInt(Math.random() * maxTop) ;
// shadow 红色小块的位置 left / top
oShadow.style.cssText = `left:${x}px;top:${y}px` ;
// tips 带图的小块 top / background-position
oTips.style.top = y + 'px' ;
oTips.style.backgroundPosition = `-${x}px -${y}px` ;
}
</script>
</body>
</html>
