帮我写一个通过js定时器实时改变div2的位置要达到碰到浏览器边缘就反弹回来鼠标移到div2上面就暂停改变位置div2上面有背景图片2jpg图片上面显示文字文字内容为：点击我；当点击文字时自动打开网页httpwwwbaiducom
<!DOCTYPE html>
<html>
<head>
<title>Div2动画</title>
<style type="text/css">
#div1 {
width: 500px;
height: 500px;
border: 1px solid black;
position: relative;
}
#div2 {
width: 100px;
height: 100px;
background-image: url('2.jpg');
background-size: cover;
position: absolute;
left: 0;
top: 0;
cursor: pointer;
}
#div2 p {
color: white;
text-align: center;
margin-top: 40px;
font-size: 16px;
cursor: pointer;
}
</style>
</head>
<body>
<div id="div1">
<div id="div2">
<p onclick="window.open('http://www.baidu.com')">点击我</p>
</div>
</div>
<script type="text/javascript">
var div2 = document.getElementById('div2');
var speedX = 5;
var speedY = 5;
var timer = setInterval(function() {
if (div2.offsetLeft + div2.offsetWidth >= div1.offsetWidth || div2.offsetLeft <= 0) {
speedX = -speedX;
}
if (div2.offsetTop + div2.offsetHeight >= div1.offsetHeight || div2.offsetTop <= 0) {
speedY = -speedY;
}
div2.style.left = div2.offsetLeft + speedX + 'px';
div2.style.top = div2.offsetTop + speedY + 'px';
}, 50);
<pre><code> div2.addEventListener('mouseover', function() {
clearInterval(timer);
});
div2.addEventListener('mouseout', function() {
timer = setInterval(function() {
if (div2.offsetLeft + div2.offsetWidth >= div1.offsetWidth || div2.offsetLeft <= 0) {
speedX = -speedX;
}
if (div2.offsetTop + div2.offsetHeight >= div1.offsetHeight || div2.offsetTop <= 0) {
speedY = -speedY;
}
div2.style.left = div2.offsetLeft + speedX + 'px';
div2.style.top = div2.offsetTop + speedY + 'px';
}, 50);
});
</script>
</code></pre>
</body>
</html>
原文地址: http://www.cveoy.top/t/topic/bcEh 著作权归作者所有。请勿转载和采集!