0
私はちょうど左、右、上、下の値を使って動くアニメーションをやった。古い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>
ブロのみ –