图片名称   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. POJ1080 Human Gene Functions(LCS)

    题目链接. 分析: 和 LCS 差不多. #include <iostream> #include <cstdio> #include <cstdlib> #inc ...

  2. COJ 1002 WZJ的数据结构（二）（splay模板）

    我的LCC,LCT,Splay格式终于统一起来了... 另外..这个形式的Splay是标准的Splay(怎么鉴别呢?看Splay函数是否只传了一个变量node就行),刘汝佳小白书的Splay写的真是不 ...

  3. struts2中修改Action后刷新浏览器后不能及时更新

    在学习strut2的时候,发现如果修改配置文件中Action的时候,刷新浏览器并不能加载修改后的Action,只能关闭服务,重新开启server才能获取到,上网找了许多资料后发现只要在配置文件中加上下 ...

  4. JDK动态代理实现原理--转载

    之前虽然会用JDK的动态代理,但是有些问题却一直没有搞明白.比如说:InvocationHandler的invoke方法是由谁来调用的,代理对象是怎么生成的,直到前几个星期才把这些问题全部搞明白了.  ...

  5. struts2，hibernate，spring整合笔记(4)--struts与spring的整合

    饭要一口一口吃,程序也要一步一步写, 很多看起来很复杂的东西最初都是很简单的 下面要整合struts和spring spring就是我们的管家,原来我们费事费神的问题统统扔给她就好了 先写一个测试方法 ...

  6. Linux设备驱动中的阻塞和非阻塞I/O

    [基本概念] 1.阻塞 阻塞操作是指在执行设备操作时,托不能获得资源,则挂起进程直到满足操作所需的条件后再进行操作.被挂起的进程进入休眠状态(不占用cpu资源),从调度器的运行队列转移到等待队列,直到 ...

  7. .NET注册页面代码

    using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.UI ...

  8. 一个中高级PHP工程师所应该具备的能力

    很多面试,很多人员能力要求都有“PHP高级工程师的字眼”,如果您真心喜欢PHP,并且您刚起步,那么我简单说说一个PHP高级工程师所应该具备的,希望给初级或已经达到中级的PHP工程师一些帮助. 一.平静 ...

  9. Jenkins api java 调用

    String filepath = "E:\\config.xml"; HttpClient client = new DefaultHttpClient(); HttpPost ...

  10. 如何查看linux系统下的各种日志文件 linux 系统日志的分析大全

    日志分类: 1. 连接时间的日志 连接时间日志一般由/var/log/wtmp和/var/run/utmp这两个文件记录,不过这 两个文件无法直接cat查看,并且该文件由系统自动更新,可以通过如下: ...