帮我写一个通过js定时器实时改变div2的位置大小为100px 30px背景为红底色要达到碰到浏览器边缘就反弹回来鼠标移到div2上面就暂停改变位置div2左上角还有关闭功能。都写在一个html里
<!DOCTYPE html>
<html>
<head>
<title>实时改变div2的位置和大小</title>
<style type="text/css">
#div1{
height: 100px;
width: 100px;
background-color: blue;
position: relative;
}
#div2{
height: 30px;
width: 100px;
background-color: red;
position: absolute;
top: 0;
left: 0;
cursor: pointer;
}
#close{
position: absolute;
top: 0;
right: 0;
cursor: pointer;
}
</style>
</head>
<body>
<div id="div1">
<div id="div2"></div>
<div id="close">X</div>
</div>
<pre><code><script type="text/javascript">
var div2 = document.getElementById('div2');
var close = document.getElementById('close');
var timer = null;
var speedX = 2;
var speedY = 2;
var posX = 0;
var posY = 0;
function move(){
posX += speedX;
posY += speedY;
if (posX > (window.innerWidth - div2.offsetWidth) || posX < 0){
speedX = -speedX;
}
if (posY > (window.innerHeight - div2.offsetHeight) || posY < 0){
speedY = -speedY;
}
div2.style.left = posX + 'px';
div2.style.top = posY + 'px';
}
timer = setInterval(move, 10);
div2.addEventListener('mouseover', function(){
clearInterval(timer);
});
div2.addEventListener('mouseout', function(){
timer = setInterval(move, 10);
});
close.addEventListener('click', function(){
clearInterval(timer);
div1.removeChild(div2);
});
</script>
</code></pre>
</body>
</html>
原文地址: http://www.cveoy.top/t/topic/bcHd 著作权归作者所有。请勿转载和采集!