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 文件相应的代码。

  • 相关阅读:
    [PHP] yield沟通函数循环内外
    [Linux] scp本地服务器和远程服务器拷贝文件
    [Linux] 大数据库导出大文件统计并去重
    [Go] golang连接查询mysql
    [日常] 解决mysql不允许外部访问
    [Go] golang创建目录写文件判断文件
    [日常] imap协议读取邮件
    [Go] golang使用github里的imap类库
    [Go] golang无缓冲通道实现工作池控制并发
    [Go] golang的range循环遍历通道
  • 原文地址:https://www.cnblogs.com/oec2003/p/738190.html
Copyright © 2011-2022 走看看