[HTML, CSS, JavaScript] Csináltam egy olyat, hogy egy gomb megnyomására az adott div elkezd forogni (classList. Add ('forgasd') -ot használva. Ennek csinálni szeretnék egy olyat, hogy megállítsa a forgást, úgy, hogy az adott irányban maradjon?
Tehát ha pl elkezdett forogni és már 40deg-nél jár, én ekkor megnyomom a gombot ami hívja a function StopNow()-ot, és úgy maradjon 40deg-en a rotate-je a divnek, amikor pedig újra megnyomom hogy forogjon, ugyan onnan kezdje a forgást (tehát 40degtől, ne kezdje előről 0-tól).
a kód így néz ki:
CSS: .load_anim{animation: spin 5s linear infinite;}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
JS: var element = document.getElementById('load');
function Start(){
element.classList.add('load_anim');
}
válasza: válasza:Itt van egy CSS animation nélküli megoldás is.
Ez régebbi böngészőkben is működik.
<!DOCTYPE html>
<html>
<head>
<style>
#animated {
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<button onclick="Start();">Start</button>
<button onclick="Pause();">Pause</button>
<button onclick="Play();">Start/Pause</button>
<br />
<br />
<div id="animated"></div>
<script>
var fps = 30; // frames per seconds
var animation_duration = 5; // seconds
var element = document.getElementById('animated');
var prev_ticks = Date.now();
function startTime() {
var ticks = Date.now();
var dt = (ticks - prev_ticks);
myAnimate(dt);
prev_ticks = ticks;
var t = setTimeout(function(){ startTime() }, 1000/fps);
}
var alpha = 0;
var isAnimationRunning = false;
function myAnimate(dt) {
if (isAnimationRunning) {
alpha += (360/(animation_duration*1000))*dt;
if (alpha > 360) {
alpha -= 360;
}
var style = ""
+"transform: rotate("+alpha+"deg);"
+"-webkit-transform: rotate("+alpha+"deg);"
+"-moz-transform: rotate("+alpha+"deg);"
+"-ms-transform: rotate("+alpha+"deg);";
element.setAttribute("style", style);
}
}
function Start() {
isAnimationRunning = true;
}
function Pause() {
isAnimationRunning = false;
}
function Play() {
isAnimationRunning = !isAnimationRunning;
}
document.body.onload = startTime;
</script>
</body>
</html>
Kapcsolódó kérdések:
Minden jog fenntartva © 2024, www.gyakorikerdesek.hu
GYIK | Szabályzat | Jogi nyilatkozat | Adatvédelem | Cookie beállítások | WebMinute Kft. | Facebook | Kapcsolat: info(kukac)gyakorikerdesek.hu
Ha kifogással szeretne élni valamely tartalommal kapcsolatban, kérjük jelezze e-mailes elérhetőségünkön!