zoukankan      html  css  js  c++  java
  • 使用Javascript制作声音按钮

         一般而言,网页中按钮是没有声音触发事件的。如果要让按钮响应鼠标动作发出声音,我们可以写一段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" onclick="DynamicAudioLink()" onMouseOver="AudioOver();playHome()" onMouseDown="AudioDown()" onMouseOut="AudioOut()"></form></center>')

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

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

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

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

  • 相关阅读:
    WebService 访问代理及安全性验证设置
    精益求精,抑或得过且过
    用Eclipse开发Android应用程序(1): 开始之前
    用Eclipse开发Android应用程序(3): 开发第一个Android应用程序HelloWorld(下篇)
    [转]C#中调用打印机编程实例
    检索 COM 类工厂中 CLSID 为 ???的组件时失败,原因是出现以下错误: 80080005。
    用Eclipse开发Android应用程序(2): 开发环境搭建
    GridView RowCommand事件操作Demo Code
    USB三模(EDGE、DCHSPA+和LTE)数据棒
    [用 OProfile 彻底了解性能]
  • 原文地址:https://www.cnblogs.com/oec2003/p/738190.html
Copyright © 2011-2022 走看看