我刚刚使用左、右、上、下值制作了一个移动动画。就像旧的windows屏幕保护程序。不超过屏幕。像屏幕宽度内的流动一样制作动画。我试过一些逻辑。但它不起作用。
使用javascript
window.onload = function () {
var circle = document.getElementById("circle");
console.log(circle);
var w = window.innerWidth;
var h = window.innerHeight;
var leftPos = 0;
var topPos = 0;
var rightPos = 0;
var btmPos = 0;
setInterval(function () {
if (w > leftPos && w > rightPos) {
leftPos += 10;
topPos += 5;
}
else if(topPos==h){
topPos-=10;
btmPos +=10;
}
else if(btmPos < h)
{
btmPos +=10;
topPos -=10;
leftPos -=10;
}
else if (topPos < h) {
leftPos -= 5;
btmPos += 5;
rightPos +=10;
}
else {
leftPos -= 10;
topPos -= 5;
}
circle.style.left = leftPos + "px";
circle.style.top = topPos + "px";
circle.style.right = rightPos + "px";
circle.style.bottom = btmPos + "px";
}, 100);
};
body{
background-color: gray;
}
p{
width: 50px;
height: 50px;
background-color: blue;
z-index: 10;
border-radius: 30px;
position: absolute;
}
button{
padding: 10px;
font-size: 15px;
color: #fff;
border-radius: 4px;
background-color: orange;
}
<div>
<p id="circle"></p
</div>
此代码帮助您实现逻辑
<script type="text/javascript">
var context;
var dx= 4;
var dy=4;
var y=150;
var x=10;
function draw(){
context= myCanvas.getContext('2d');
context.clearRect(0,0,300,300);
context.beginPath();
context.fillStyle="#0000ff";
context.arc(x,y,20,0,Math.PI*2,true);
context.closePath();
context.fill();
if( x<0 || x>300)
dx=-dx;
if( y<0 || y>300)
dy=-dy;
x+=dx;
y+=dy;
}
setInterval(draw,10);
</script>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML5 Bouncing Ball</title>
<style type="text/css">
<!--
body { background-color:#ededed; font:normal 12px/18px Arial, Helvetica, sans-serif; }
h1 { display:block; width:600px; margin:20px auto; padding-bottom:20px; font:normal 24px/30px Georgia, "Times New Roman", Times, serif; color:#333; text-shadow: 1px 2px 3px #ccc; border-bottom:1px solid #cbcbcb; }
#container { width:600px; margin:0 auto; }
#myCanvas { background:#fff; border:1px solid #cbcbcb; }
#nav { display:block; width:100%; text-align:center; }
#nav li { display:block; font-weight:bold; line-height:21px; text-shadow:1px 1px 1px #fff; width:100px; height:21px; padding:5px; margin:0 10px; background:#e0e0e0; border:1px solid #ccc; -moz-border-radius:4px;-webkit-border-radius:4px; border-radius:4px; float:left; }
#nav li a { color:#000; display:block; text-decoration:none; width:100%; height:100%; }
-->
</style>
</head>
<body>
<h1>Bouncing a Ball Around with HTML5 and JavaScript</h1>
<div id="container">
<canvas id="myCanvas" width="300" height="300"></canvas>
<ul id="nav">
<li><a href="http://sixrevisions.com/html/bouncing-a-ball-around-with-html5-and-javascript/">View Tutorial</a></li>
<li><a href="http://sixrevisions.com/html/bouncing-a-ball-around-with-html5-and-javascript/#comments">Post Comment</a></li>
</ul>
</div>
</body>
</html>