<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>This is test</title>
<style>
*{
margin: 0px;
padding: 0px;
}
#main{
position: absolute;
margin: 0px;
padding: 0px;
height: 50px;
width: 50px;
cursor: pointer;
}
</style>
</head>
<body>
<div id="main">
<a href="test.html" style="text-decoration: none ;color: #000" target="_blank">
内容
</a>
</div>
</body>
<script>
s = 0;
v = 10;
sx = 0;
vx = 10;
div = 50;
win = document.documentElement.clientHeight;
winx = document.documentElement.clientWidth;
function start(){
obj = setInterval(function () {
//y轴运动
s +=v;
if (s<=0){
v = -v;
}
if (s>=win-div){
v = -v;
// s =win-div;
}
main.style.top=s+'px';
//x轴运动
sx +=vx;
if (sx<=0){
vx = -vx;
}
if (sx>=winx-div){
vx = -vx;
// s =win-div;
}
main.style.left=sx+'px';
},100);
}
start();
main.onmouseenter = function () {
clearInterval(obj);
}
main.onmouseleave = function () {
start();
}
</script>
</html>
JS-弹力球动画的实现
最新推荐文章于 2020-08-06 21:14:07 发布