图片名称   sprite.zip  

<!doctype html>

<html>

    <head>

    </head>

<style>

    .css{

        position: absolute;

        top: ;

        left: ;

        height: %;

        width: %;

        z-index: -;

        background-position: center ;

        background-repeat: no-repeat;

        background-attachment: fixed;

        background-size: cover;

        -webkit-background-size: cover;

        -o-background-size: cover;

        zoom: ;

        background-image: url("117.jpg");

    }

    #video1{

        display:none;

    }

    #play{

        width: 60px;

        height: 61px;

        background:url(sprite.png) no-repeat;

        background-position: -60px 0px;

        border:none;

    }

    #vid{

        width: 60px;

        height: 61px;

        background:url(sprite.png) no-repeat;

        background-position:  ;

        border:none;

    }

    .hide{

        display:none;

    }

</style>

    <body>

        <div class="css">

        </div>

        <audio src="1.mp3" controls="controls" id="video1">

           不支持

        </audio>

        <button type="button" id="play" onclick="playVid()"></button>

        <button class="hide" type="button" id="vid" onclick="pauseVid()"></button>

    </body>

<script>

var myVideo=document.getElementById("video1");

var Oplay = document.getElementById('play');

var Ovid = document.getElementById('vid');

Oplay.onclick=function(){

    this.style.display='none';

    Ovid.style.display='block';

     myVideo.play();

}

Ovid.onclick=function(){

    this.style.display='none';

    Oplay.style.display='block';

      myVideo.pause();

}

/**

function playVid()

  {

  myVideo.play();

  }

function pauseVid()

  {

  myVideo.pause();

  }

  */

</script>

</html>

javascript 网页图标音乐切换的更多相关文章

  1. 《Javascript网页经典特性300例》

    <Javascript网页经典特性300例> 基础篇 第1章:网页特性 刷新.后退.前进.关闭.标题.跳转禁止网页放入框架动态加载js避免浏览器使用缓存加载页面 第2章:DOM操作 根据n ...

  2. 《JavaScript网页特效经典300例-进阶篇》

    <Javascript网页经典特性300例> 进阶篇 第11章:导航菜单特效 二级导航菜单三级导航菜单动态加载导航菜单三级联动导航菜单树形导航菜单当网页超过一屏时导航菜单始终置顶 第12章 ...

  3. 《JavaScript网页特效经典300例》

    <JavaScript网页特效经典300例> 基本信息 作者: 杨磊    张志美 丛书名: 百炼成钢系列丛书 出版社:电子工业出版社 ISBN:9787121220524 上架时间:20 ...

  4. 为你的网页图标（Favicon）添加炫丽的动画和图片

    Favico.js 在让你的网页图标显示徽章,图像或视频.你设置可以轻松地在网页图标中使用动画,可以自定义类型的动画,背景颜色和文字颜色.它支持的动画,像幻灯片,渐变,弹出等等. 您可能感兴趣的相关文 ...

  5. 二、JavaScript语言--JS基础--JavaScript进阶篇--选项卡切换效果

    利用JavaScript知识,实现选项卡切换的效果. 效果图: 文字素材: 房产: 275万购昌平邻铁三居 总价20万买一居     200万内购五环三居 140万安家东三环     北京首现零首付楼 ...

  6. JavaScript实现多栏目切换效果

    效果: 代码: <!doctype html> <html> <head> <meta http-equiv="Content-Type" ...

  7. 《JavaScript网页经典特效300例》

    <JavaScript网页经典特效300例> 基础篇 进阶篇 高级篇

  8. 《JavaScript网页特效经典300例-高级篇》

    <Javascript网页经典特性300例> 高级篇 第18章:ajax应用 Ajax传输JSON数据实例定义一套自己的Ajax框架 第19章:面向对象的特性 定义一个类利用prototy ...

  9. 关于html5中的 网页图标问题

    在html5 中 设置网页图标的语句<link rel="icon" type="image/x-icon" href="favicon.ico ...

随机推荐

  1. 树形dp-CF-337D. Book of Evil

    题目链接: http://codeforces.com/problemset/problem/337/D 题目大意: 给一棵树,m个点,一个距离d,求有多少个点A,使得A到所有的m个点距离都不超过d. ...

  2. 【HDOJ】1423 Greatest Common Increasing Subsequence

    LCIS /* 1423 */ #include <cstdio> #include <cstring> #include <cstdlib> #define MA ...

  3. 第一个Windows程序

    今天,我们的任务就是和大家一起开发第一个Windows程序,这个程序的功能非常简单,就是弹出一个对话框,但是简单的程序可以帮助大家建立信心. 例1 第一个Windows程序 /* ********** ...

  4. windows程序设计简介

    大家好,非常高兴和大家一起分享Windows开发心得,Windows已经诞生很多年了,一直因为它的简单易用而深受欢迎,相信很多人在使用Windows的时候,一定有这样一个想法:希望自己将来可以写一个很 ...

  5. 海美迪Q5智能机顶盒的蓝牙功能

    虽然在硬件上,海美迪Q5智能机顶盒没有集成蓝牙模块,但是在软件系统上,Q5是支持蓝牙驱动的,所以它可以通过USB外接蓝牙适配器来扩展出蓝牙功能,简单来说,就是你另外买个蓝牙适配器,插到Q5上面,就能用 ...

  6. java—— 调用系统命令

    调用所在环境的命令 链接:http://blog.csdn.net/yy6060/article/details/6311916 1 import java.io.*; 2 class Exec{ 3 ...

  7. 搭建完整邮件系统(postfix+dovecot+clamAV+Spamassassin+amavisd-new)

    ============================ 相关软件: 1. 发送邮件 --- postfix 2. 身份认证 --- sasl2 3. 接收邮件 --- dovecot 4. 防病毒邮 ...

  8. git查看某个文件的修改历史

    <转自 http://www.cnblogs.com/flyme/archive/2011/11/28/2265899.html> 有时候在比对代码时,看到某些改动,但不清楚这个改动的作者 ...

  9. MM32 备份域学习(兼容STM32)

    MM32 备份域学习(兼容STM32) 内容提要 备份域工作原理 备份域特性 备份域的保护:侵入检测 备份域侵入检测 备份域电源与主要内容 备份域特性 20字节数据后备寄存器(中容量和小容量产品),或 ...

  10. 本篇文章主要是对jquery+ajax+C#实现无刷新操作数据库数据的简单实例进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助

    我们知道同步执行和异步执行的区别,为了更好的提高用户的体验,我们都会采用异步方式去处理一些问题,毕竟单线程的同步可能回造成卡死等现象,很不友好,所以可以使用ajax来完成用户的体验,现在我们就来说说如 ...