gpt4 book ai didi

javascript - javascript 函数只能运行一次

转载 作者:行者123 更新时间:2023-11-28 19:02:09 24 4
gpt4 key购买 nike

这是用于旋转 p 元素的函数:

<script>
function ani() {

var z = document.getElementById("rotate");
z.style.webkitTransition = "1.2s";
z.style.transition = "1.2s" ;
z.style.transform = "rotateY(360deg)";
z.style.webkitTransform = "rotateY(360deg)";
z.style.OTransform = "rotateY(360deg)";
z.style.MozTransform = "rotateY(360deg)";
}
</script>

这是完整的代码,包括 html 和 javascript:

<!DOCTYPE html>
<html lang="en-US">
<head>
<title>animation</title>
<meta chartset="utf-8">

<script>
function ani() {
var z = document.getElementById("rotate");
z.style.webkitTransition = "1.2s";
z.style.transition = "1.2s" ;
z.style.transform = "rotateY(360deg)";
z.style.webkitTransform = "rotateY(360deg)";
z.style.OTransform = "rotateY(360deg)";
z.style.MozTransform = "rotateY(360deg)";
}
</script>
</head>

<body>
<div>
<p onmouseover="ani()" id="rotate" style="background: rgba(0,0,0,0.5); text-align: center; color: #fff;">Great this is rotating!</p>
</div>
</body>
</html>

最佳答案

您应该学习制作 .css 文件并导入它们,而不是在 HTML 和 JavaScript 中设置所有内容的样式。这只是一个很好的做法。

HTML:

<!DOCTYPE html>
<html lang="en-US">
<head>
<title>animation</title>
<meta chartset="utf-8"/>

<link rel="stylesheet" href="style.css"/>
</head>
<body>
<p id="rotate">Great this is rotating!</p>
</body>
</html>

CSS(样式.css):

#rotate {
background: rgba(0,0,0,0.5);
text-align: center;
color: #fff;
}

#rotate:hover {
-webkit-transition: 1.2s all;
transition: 1.2s all;
-webkit-transform: rotateY(360deg);
-moz-transform: rotateY(360deg);
-o-transform: rotateY(360deg);
transform: rotateY(360deg);
}

JavaScript:

// Nothing! Fantastic!

关于javascript - javascript 函数只能运行一次,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32322719/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com