我真的不知道如何通過按住任何鍵來讓這個“旋轉的球”開始和停止它的影片。影片只能在按下鍵時運行。
我真的試圖做研究，但只找到我不知道如何編碼的 jQuery 代碼。我想我錯過了一些關于我的 Javascript 的東西，但正如你現在可能已經知道的那樣，我對此真的很陌生，所以我不知道缺少什么。
（我知道我已經keypress打開了“Q”，但我希望影片在我按下任何鍵時開始運行，然后如果我放開鍵則暫停。我還希望影片運行多次而不是在之后停止1 次運行。）
const start = document.querySelector("#ball");
const rot = document.querySelector("#roter");
window.addEventListener("keydown", spill)
function spill(event) {
if (event.key == "q") {
ball.style.animation = "rulle 4s linear running";
roter.style.animation = "roter 4s linear running";
} else {
ball.style.animation = "rulle 4s linear paused";
roter.style.animation = "roter 4s linear paused";
}
};.linje{
width: 1000px;
height: 500px;
}
#ball{
position: relative;
top: 40px;
left: 0;
width: 100px;
height: 100px;
background-color: rgb(114, 240, 214);
border-radius: 50%;
animation-play-state: paused;
text-align: center;
line-height: 100px;
}
/*.ball:hover{
animation-play-state: paused;
}
-#roter:hover{
animation-play-state: paused;
} */
@keyframes rulle {
0%{
top: 40px;
left: 0;
transform: rotate(0deg);
}
12.5%{
top: 40px;
left: 50px;
transform: rotate(45deg);
}
25%{
top: 40px;
left: 100px;
transform: rotate(90deg);
}
37.5%{
top: 40px;
left: 150px;
transform: rotate(135deg);
}
50%{
top: 40px;
left: 200px;
transform: rotate(180deg);
}
62.5%{
top: 40px;
left: 250;
transform: rotate(225deg);
}
75%{
top: 40px;
left: 300px;
transform: rotate(270deg);
}
87.5%{
top: 40px;
left: 350px;
transform: rotate(315deg);
}
100%{
top: 40px;
left: 250px;
transform: rotate(360deg);
}
}
#roter{
animation-name: roter;
animation-play-state: paused;
}
@keyframes roter {
0%{
}
25%{
transform: rotate(90deg);
}
50%{
transform: rotate(180deg);
}
75%{
transform: rotate(270deg);
}
100%{
transform: rotate(360deg);
}
}<div class="linje">
<div id="ball">
<p id="roter">161519</p>
</div>
</div> uj5u.com熱心網友回復：
這是你想要的嗎？運行代碼段并檢查。你的css影片不流暢。我沒有時間修復您的影片，但以下代碼可以滿足您的要求。
注意這里的js代碼。在 css 中，影片已經應用并將播放狀態設定為，paused因此它不會在開始時播放。然后，在keydown事件中，播放狀態更改為running和keyup，它又更改回paused。
此外，您問的另一點是永遠運行 css 影片。它可以通過或使用我在這里animation-iteration-count: infinite使用的速記來解決。animation: rulle 4s infinite linear;注意這個詞infinite。
const start = document.querySelector("#ball");
const rot = document.querySelector("#roter");
window.addEventListener("keydown", () => {
ball.style.animationPlayState = "running";
roter.style.animationPlayState = "running";
})
window.addEventListener("keyup", () => {
ball.style.animationPlayState = "paused";
roter.style.animationPlayState = "paused";
}).linje{
width: 1000px;
height: 500px;
}
#ball{
position: relative;
top: 40px;
left: 0;
width: 100px;
height: 100px;
background-color: rgb(114, 240, 214);
border-radius: 50%;
animation: rulle 4s infinite linear;
animation-play-state: paused;
text-align: center;
line-height: 100px;
}
@keyframes rulle {
0%{
top: 40px;
left: 0;
transform: rotate(0deg);
}
12.5%{
top: 40px;
left: 50px;
transform: rotate(45deg);
}
25%{
top: 40px;
left: 100px;
transform: rotate(90deg);
}
37.5%{
top: 40px;
left: 150px;
transform: rotate(135deg);
}
50%{
top: 40px;
left: 200px;
transform: rotate(180deg);
}
62.5%{
top: 40px;
left: 250;
transform: rotate(225deg);
}
75%{
top: 40px;
left: 300px;
transform: rotate(270deg);
}
87.5%{
top: 40px;
left: 350px;
transform: rotate(315deg);
}
100%{
top: 40px;
left: 250px;
transform: rotate(360deg);
}
}
#roter{
animation: roter 4s linear infinite;
animation-play-state: paused;
}
@keyframes roter {
0%{
}
25%{
transform: rotate(90deg);
}
50%{
transform: rotate(180deg);
}
75%{
transform: rotate(270deg);
}
100%{
transform: rotate(360deg);
}
}<div class="linje">
<div id="ball">
<p id="roter">161519</p>
</div>
</div> uj5u.com熱心網友回復：
您需要收聽"keyup"事件才能釋放影片。event.key == "q" else并不意味著Event.type是一個"keyup".
這是一個更簡單的 CSS 和所需的（更好的）JS 方法。
您只需要使用JS元素的樣式animationPlayState值進行切換。
此外，在這樣做的同時確保代碼不會在長按時被觸發——通過使用evt.repeat：
const elBall = document.querySelector("#ball");
const toggleRoll = (evt) => {
if (evt.key !== "q" || evt.repeat) return;
elBall.style.animationPlayState = evt.type === "keydown" ? "running" : "paused";
};
addEventListener("keydown", toggleRoll);
addEventListener("keyup", toggleRoll);#ball {
--size: 100px;
position: relative;
top: 40px;
width: var(--size);
height: var(--size);
line-height: var(--size);
border-radius: var(--size);
text-align: center;
background-color: rgb(114, 240, 214);
animation: roll 3s linear infinite alternate;
animation-play-state: paused;
}
@keyframes roll {
0% { transform: translateX(0px) rotate(0deg); }
100% { transform: translateX(300px) rotate(360deg); }
}Click here to focus, then press key "q" to animate!
<div id="ball">161519</div>uj5u.com熱心網友回復：
它確實有效。
https：斜線斜線jsfiddle.net/k5cx382e/（
按 q 運行，按任意鍵停止影片。
你錯過了包括 jquery 嗎？
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/515382.html
上一篇：想要在使用VanillaJavaScript懸停div時添加類
下一篇：背景視頻重疊按鈕