使用Javascript制作声音按钮

世俗的余孽

世俗的余孽

2016-02-19 15:41

关注图老师设计创意栏目可以让大家能更好的了解电脑,知道有关于电脑的更多有趣教程,今天给大家分享使用Javascript制作声音按钮教程,希望对大家能有一点小小的帮助。

  文章简介:

  一般而言,网页中按钮是没有声音触发事件的。如果要让按钮响应鼠标动作发出声音,我们可以写一段JavaScript脚本代码来实现。

  能让按钮发出声音的脚本,这下不用制作Flash按钮也可以了,我试用的感觉还不错。

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)

  制作方法:

  1、新建文件:

以下是引用片段:
DynamicAudioButton.js ,代码:
//Customize Dynamic Audio Link 自定义动态声音链接
function DynamicAudioLink(){
    open("http://www.pcedu.com.cn")
}

//Customize Dynamic Audio Mouse Over Color 自定义动态声音mouseover颜色
function AudioOver() {
    document.Audio.button.style.background="#999999"
    document.Audio.button.style.color="white"
}

//Customize Dynamic Audio Mouse Down Color 自定义动态声音mousedown颜色
function AudioDown() {
    document.Audio.button.style.color="#cccccc"
}

//Customize Dynamic Audio Mouse Off Color 自定义动态声音mouseOff 颜色
function AudioOut() {
    document.Audio.button.style.background="#666666"
    document.Audio.button.style.color="#ffffff"
}

//Customize Dynamic Audio sound 自定义动态声音
function playHome() 
{
    document.all.sound.src = "bleep.wav";
}

document.write(''bgsound id="sound"'')

//Customize Button Style 自定义按钮样式
document.write(''style type="text/css"''+''!--'')
document.write(''.select{background:#666666;border-color:"#999999";color:"#ffffff";font-family:Arial,Helvetica,Verdana;font-size:10pt;font-weight: bold;}''+''--''+''/STYLE'')

document.write(''centerform name=Audioinput class="select" name=button type="button" value="Dynamic Audio" onclick="DynamicAudioLink()" onMouseOver="AudioOver();playHome()" onMouseDown="AudioDown()" onMouseOut="AudioOut()"/form/center'')

  2、保存文件后,在页面相关处插入代码引用该JS文件:

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)

以下是引用片段:
Script language="JavaScript" SRC="DynamicAudioButton.js"/script

  3、选择好音乐文件,可以是wav、MP3等,音乐文件尽量小些。

  方法制作完成,用户可以使用图片等形式,当然也得修改 DynamicAudioButton.js 文件相应的代码。

展开更多 50%)
分享

猜你喜欢

使用Javascript制作声音按钮

Web开发
使用Javascript制作声音按钮

实例:使用Javascript制作声音按钮

Web开发
实例:使用Javascript制作声音按钮

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

快牙怎么关闭操作声音

手机软件 应用软件
快牙怎么关闭操作声音

使用 Fireworks 制作水晶按钮

水晶
使用 Fireworks 制作水晶按钮

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

使用CorelDRAW 11.0 制作玻璃按钮

CorelDRAW
使用CorelDRAW 11.0 制作玻璃按钮

使用Dreamweaver实现交替图像按钮制作

Web开发
使用Dreamweaver实现交替图像按钮制作

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

oracle 将a用户权限赋给b用户

oracle 将a用户权限赋给b用户

Javascript 验证上传图片大小[客户端]

Javascript 验证上传图片大小[客户端]
下拉加载更多内容 ↓