gpt4 book ai didi

javascript - 页面上有多个 JS 按钮且页面上有翻转状态

转载 作者:行者123 更新时间:2023-12-02 19:41:50 27 4
gpt4 key购买 nike

我正在学习 JS,以便我可以拥有具有翻转状态和声音效果的按钮。我做得很好,直到我厌倦了添加额外的按钮,这导致我失去了翻转状态。

您可以在此处查看我的一个按钮示例:http://www.ultralaboratories.com/sound1.html

这里有两个按钮:http://www.ultralaboratories.com/sound2.html

为了简单起见,我使用了完全相同的按钮两次,但完成后将会有 5 个独特的按钮。

有什么想法吗?谢谢!

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
title>Untitled Document</title>
<audio id="audio_element" src="sound.mp3"></audio>
<script>
var audio = document.getElementById("audio_element");
audio.volume = 0;
audio.play();

function playAudio() {

audio.currentTime = 0.01;
audio.volume = 1;
audio.play();

}
</script>

<SCRIPT LANGUAGE="JavaScript">
<!-- hide from non JavaScript Browsers

Rollimage = new Array()

Rollimage[0]= new Image(156,311)
Rollimage[0].src = "/Images/Banner/e.up.jpg"

Rollimage[1] = new Image(156,311)
Rollimage[1].src = "/Images/Banner/e.over.jpg"

function SwapOut(){
document.element.src = Rollimage[1].src;
return true;
}

function SwapBack(){
document.element.src = Rollimage[0].src;
return true;
}

// - stop hiding -->
</SCRIPT>

</head>

<body>
<div onmouseover="playAudio()">
<P align="center">
<A HREF="http://www.joemaller.com/" onmouseover="SwapOut()" onmouseout="SwapBack()"> <IMG SRC="/Images/Banner/e.up.jpg" NAME="element" WIDTH=156 HEIGHT=311 BORDER=0> </A>
<A HREF="http://www.joemaller.com/" onmouseover="SwapOut()" onmouseout="SwapBack()"> <IMG SRC="/Images/Banner/e.up.jpg" NAME="element" WIDTH=156 HEIGHT=311 BORDER=0> </A>

</P>
</div>

最佳答案

您在文档中结合了 HTML5 和 HTML3.2...这真的很糟糕。

首先,对旧浏览器隐藏 JavaScript 表明您仍然生活在 90 年代。不再需要了。

其次,当你向 JavaScript 请求 document.element 时,你指的是哪一个?如果只有一个,那也没关系,因为它可以猜测。两个以上就不行了。要了解鼠标悬停在哪个图像上,请传递 this作为 SwapOut 的参数和SwapBack (即 onmouseover="SwapOut(this)" )。然后接受这个论证并从中得到图像。在这种情况下,elm.children[0]会工作得很好(假设您将参数命名为 elm )。结果函数:

function SwapOut(elm) {elm.children[0].src = Rollimage[1].src;}
function SwapBack(elm) {elm.children[0].src = Rollimage[0].src;}

(您甚至可以将两个函数合并为一个,并将 10 作为第二个参数)

然后是关于总体布局的一些事情:当它是主体元素时,音频元素位于头部。您无缘无故地以零音量播放声音。您可以移动getElementById到函数中以避免不必要的全局变量。

最后,如果您想使用 HTML5 元素,则必须使用 HTML5 文档类型(即 <!DOCTYPE html> )。

关于javascript - 页面上有多个 JS 按钮且页面上有翻转状态,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10306979/

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