Javascript屏幕保护程序动画不起作用

Javascript screensaver animation not working

本文关键字：不起作用 动画 程序 屏幕保护 Javascript      更新时间：2023-09-26

我刚刚使用左、右、上、下值制作了一个移动动画。就像旧的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>

相关文章：