javascript 网页图标音乐切换
图片名称 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 网页图标音乐切换的更多相关文章
- 《Javascript网页经典特性300例》
<Javascript网页经典特性300例> 基础篇 第1章:网页特性 刷新.后退.前进.关闭.标题.跳转禁止网页放入框架动态加载js避免浏览器使用缓存加载页面 第2章:DOM操作 根据n ...
- 《JavaScript网页特效经典300例-进阶篇》
<Javascript网页经典特性300例> 进阶篇 第11章:导航菜单特效 二级导航菜单三级导航菜单动态加载导航菜单三级联动导航菜单树形导航菜单当网页超过一屏时导航菜单始终置顶 第12章 ...
- 《JavaScript网页特效经典300例》
<JavaScript网页特效经典300例> 基本信息 作者: 杨磊 张志美 丛书名: 百炼成钢系列丛书 出版社:电子工业出版社 ISBN:9787121220524 上架时间:20 ...
- 为你的网页图标（Favicon）添加炫丽的动画和图片
Favico.js 在让你的网页图标显示徽章,图像或视频.你设置可以轻松地在网页图标中使用动画,可以自定义类型的动画,背景颜色和文字颜色.它支持的动画,像幻灯片,渐变,弹出等等. 您可能感兴趣的相关文 ...
- 二、JavaScript语言--JS基础--JavaScript进阶篇--选项卡切换效果
利用JavaScript知识,实现选项卡切换的效果. 效果图: 文字素材: 房产: 275万购昌平邻铁三居 总价20万买一居 200万内购五环三居 140万安家东三环 北京首现零首付楼 ...
- JavaScript实现多栏目切换效果
效果: 代码: <!doctype html> <html> <head> <meta http-equiv="Content-Type" ...
- 《JavaScript网页经典特效300例》
<JavaScript网页经典特效300例> 基础篇 进阶篇 高级篇
- 《JavaScript网页特效经典300例-高级篇》
<Javascript网页经典特性300例> 高级篇 第18章:ajax应用 Ajax传输JSON数据实例定义一套自己的Ajax框架 第19章:面向对象的特性 定义一个类利用prototy ...
- 关于html5中的 网页图标问题
在html5 中 设置网页图标的语句<link rel="icon" type="image/x-icon" href="favicon.ico ...
随机推荐
- db file sequential read等待事件的一点研究
db file sequential read等待事件有3个参数:file#,first block#,和block数量. 这个等待事件有3个参数P1,P2,P3, 其中P1代表Oracle要读取的文 ...
- python摘抄
核心模块: random 当你的程序需要随机数功能时,random 模块就能派上用场.该模块包含多个伪随机数发生器,它们均以当前的时间戳为随机数种子.这样只要载入这个模块就能随时开始工作.下面列出了该 ...
- 在Visual Studio中使用AStyle
最近在做一个C++项目,我们使用了一个叫做AStyle的插件来做代码格式化. 下载方式1:通过Visual Studio下载 启动Visual Studio,以下简称VS: 英文版VS:VS主菜单 & ...
- 【转载】B树、B-树、B+树、B*树都是什么
1. B树 即二叉搜索树: 1.所有非叶子结点至多拥有两个儿子(Left和Right): 2.所有结点存储一个关键字: 3.非叶子结点的左指针指向小于其关键字的子树,右指针指向大于其关键字的子树: 如 ...
- Gradle构建Java Web应用（转）
转自:http://www.blogjava.net/jiangshachina/archive/2014/02/03/409285.html 本文是发布在java.net上的一篇摘自于<Gra ...
- Linux动态库的编译与使用
转载: http://hi.baidu.com/linuxlife/blog/item/0d3e302ae2384d3a5343c1b1.html Linux下的动态库以.so为后缀,我也是初次在Li ...
- eXtremeDB
I am doing a cluster test, why did I encounter the ld errorwhen compiling the several packages from ...
- Mac下phpstorm 浏览器出现 502 bad gateway 解决办法
问题: 在网上搜了好久,都没有合适的解决办法,于是决定分享下自己鼓捣好久解决了的办法,希望能帮到大家. 出现上述情况,一般在phpstorm里都会出现这个提示 我们只需要点击蓝色的进去,或者点phps ...
- cocos2d-x精灵移动的方法
1.飞机发射子弹型 想要实现子弹的的飞行效果,又不想在每帧Update里计算位置,最好的方法调用CCMoveTo 例在发射子弹的时机,能够ccTouchBegan时: CCMoveTo* move = ...
- css中的垂直居中方法
单行文字 (外行高度固定) line-height 行高, 将line-height值与外部标签盒子的高度值设置成一致就可以了. height:3em; line-height:3em; 多行文字 图 ...