Javascript屏幕保護動畫不起作用

我剛剛使用左，右，上，下值做了一個移動動畫。像舊的Windows屏幕保護程序。不超過屏幕。在屏幕寬度內像動畫一樣動畫。我嘗試過一些邏輯。但它不工作。Javascript屏幕保護動畫不起作用

使用的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>

來源

2016-08-05 Prasath V

此代碼可以幫助您實現邏輯使用位置

<script type="text/javascript"> 
 
var context; 
 
var dx= 4; 
 
var dy=4; 
 
var y=150; 
 
var x=10; 
 
function draw(){ 
 
\t context= myCanvas.getContext('2d'); 
 
\t context.clearRect(0,0,300,300); 
 
\t context.beginPath(); 
 
\t context.fillStyle="#0000ff"; 
 
\t context.arc(x,y,20,0,Math.PI*2,true); 
 
\t context.closePath(); 
 
\t context.fill(); 
 
\t if(x<0 || x>300) 
 
\t dx=-dx; 
 
\t if(y<0 || y>300) 
 
\t \t dy=-dy; 
 
\t \t x+=dx; 
 
\t \t y+=dy; 
 
\t } 
 
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"> 
 
\t 
 
\t <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>

來源

2016-08-05 10:57:38

兄弟只要 –

Javascript屏幕保護動畫不起作用

回答

相關問題