<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
#box {
width: 650px;
height: 400px;
margin: 50px auto;
border: 1px solid red;
position: relative;
}
#content {
width: 650px;
height: 350px;
position: relative;
background-image: url(1.jpeg);
background-size: 650px 350px;
}
#shadow {
height: 40px;
width: 40px;
position: absolute;
background-color: aliceblue;
left: 0;
top: 0;
}
#block {
height: 40px;
width: 40px;
position: absolute;
left: 0;
top: 355px;
background-image: url(1.jpeg);
background-size: 650px 350px;
}
#tip {
height: 40px;
width: 40px;
position: absolute;
left: 0;
top: 0;
background-image: url(1.jpeg);
background-size: 650px 350px;
}
</style>
<div id="box">
<div id="content">
<div id="shadow"></div>
<div id="tip"></div>
</div>
<div id="block"></div>
</div>
<script>
var a = document.querySelector('#content');
var b = document.querySelector('#shadow');
var c = document.querySelector('#tip');
var d = document.querySelector('#block');
var maxTop = a.clientHeight - b.offsetHeight;
var maxLeft = a.clientWidth - b.offsetWidth;
setPosition();
d.onmousedown = function (e) {
var ev = event || e;
var startX = ev.x;
document.onmousemove = function (e) {
var ev = event || e;
var endX = ev.x;
var left = endX - startX;
if (left <= 0) {
left = 0;
}
if (left >= maxLeft) {
left = maxLeft;
}
d.style.left = left + 'px';
c.style.left = left + 'px';
}
document.onmouseup = function () {
document.onmousemove = null;
if (c.offsetLeft === b.offsetLeft) {
alert('成功');
c.style.left = 0;
d.style.left = 0;
setPosition();
} else {
c.style.left = 0;
d.style.left = 0;
setPosition();
}
}
}
function setPosition() {
var y = Math.round(Math.random() * maxTop);
var x = Math.round(Math.random() * maxLeft);
b.style.top = y + 'px';
b.style.left = x + 'px';
c.style.top = y + 'px';
c.style.backgroundPosition = `-${x}px -${y}px`;
d.style.backgroundPosition = `-${x}px -${y}px`;
}
window.ondragstart = function (e) {
return false;
}
</script>