html 代码
#div1 {
width: 50px;
height: 50px;
padding: 20px;
background-color: pink;
position: absolute;
top: 0;
left: 0;
border-radius: 50px;
}
</style>
</head>
<body>
<div id="warp">
<div id="div1"></div>
</div>
</body>
<script type="text/javascript">
var oWarp = document.getElementById("warp");
var oDiv1 = document.getElementById("div1");
//最大运动宽度
var maxWidth = oWarp.clientWidth – oDiv1.offsetWidth;
var maxHeight = oWarp.clientHeight – oDiv1.offsetHeight;
var speedY = 6;
var speedX = 8;
var timer = setInterval(function () {
var iTargetX = 0;
var iTargetY = 0;
iTargetY = speedY > 0 ? maxHeight : 0;
iTargetX = speedX > 0 ? maxWidth : 0;
if (Math.abs(iTargetX – oDiv1.offsetLeft) <= Math.abs(speedX)) {
oDiv1.style.left = iTargetX + "px";
//当到达目标值是,元素做反向运动,改变速度
speedX *= -1;
} else {
oDiv1.style.left = oDiv1.offsetLeft + speedX + "px";
}
if (Math.abs(iTargetY – oDiv1.offsetTop) <= Math.abs(speedY)) {
oDiv1.style.top = iTargetY + "px";
//当到达目标值是,元素做反向运动,改变速度
speedY *= -1;
} else {
oDiv1.style.top = oDiv1.offsetTop + speedY + "px";
}
},20);
</script>
</html>
评论前必须登录!
注册