请选择 进入手机版 | 继续访问电脑版
贠老师培训群:150322713    贠老师QQ:767708506

贠老师office培训-excel学习网

 找回密码
 立即注册
点击咨询贠老师
查看: 155|回复: 6

[js] Js按钮制作声音

[复制链接]

607

主题

604

帖子

1909

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
1909
发表于 2016-2-16 23:15:49 | 显示全部楼层 |阅读模式
一般而言,网页中按钮是没有声音触发事件的。如果要让按钮响应鼠标动作发出声音,我们可以写一段JavaScript脚本代码来实现。

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

制作方法:

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('<center><form name=Audio><input class="select" name=button type="button" value="Dynamic
Audio"></form></center>')
   2、保存文件后,在页面相关处插入代码引用该JS文件:

<Script language="JavaScript" SRC="DynamicAudioButton.js"></script>

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

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



想要了解更多更全面的web前段知识,css样式,html教程,数据库教程,word教程,excel教程等等,就到excel学习网www.excelxue.com


回复

使用道具 举报

0

主题

700

帖子

57

积分

注册会员

Rank: 2

积分
57
发表于 2016-3-6 22:53:19 | 显示全部楼层
顶楼主,帮你顶个贴,我挣个积分
回复 支持 反对

使用道具 举报

0

主题

766

帖子

772

积分

高级会员

Rank: 4

积分
772
发表于 2016-3-30 09:10:39 | 显示全部楼层
赞赞
回复 支持 反对

使用道具 举报

0

主题

902

帖子

45

积分

注册会员

Rank: 2

积分
45
发表于 2016-4-5 22:22:54 | 显示全部楼层
希望楼主能够收集更多的资料,谢谢了!
回复 支持 反对

使用道具 举报

0

主题

775

帖子

783

积分

高级会员

Rank: 4

积分
783
发表于 2016-4-14 20:31:57 | 显示全部楼层
先收藏再学习,谢谢啦!
回复 支持 反对

使用道具 举报

4

主题

1004

帖子

195

积分

注册会员

Rank: 2

积分
195
发表于 2018-5-22 19:02:52 | 显示全部楼层
有些不是太明白,研究研究再说
回复 支持 反对

使用道具 举报

0

主题

895

帖子

61

积分

注册会员

Rank: 2

积分
61
发表于 2018-10-12 21:52:23 | 显示全部楼层
大神啊!豁然开朗。。。。。。
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则



陕ICP备15003731号  

贠老师培训 GMT+8, 2018-11-18 18:00 , Processed in 0.220718 second(s), 31 queries .

快速回复 返回顶部 返回列表