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 ...
随机推荐
- Centos6.5 qt 安装
1,centos linux系统必须预先以安装x Server(KDE or GNOME) 2,wget http://download.qt-project.org/official_release ...
- 「Poetize10」封印一击
描述 Description Nescafe由n种元素组成(编号为1~n), 第i种元素有一个封印区间[ai,bi].当封印力度E小于ai时,该元素将获得ai的封印能量:当封印力度E在ai到bi之间时 ...
- 01背包之求第K优解——Bone Collector II
http://acm.hdu.edu.cn/showproblem.php?pid=2639 题目大意是,往背包里赛骨头,求第K优解,在普通01背包的基础上,增加一维空间,那么F[i,v,k]可以理解 ...
- Unity中OnGUI绘制贪吃蛇
Square.cs : public class Square : MonoBehaviour { public int row, col; public Rect rect; public Text ...
- NSString copy or not （strong）？
前些日子笔者一直在维护公司的一些旧项目,项目里面的NSString属性几乎全部用的strong,而我在给项目增加一些新的功能的,又都用的copy,因为在我的脑子里几乎已经把NSString大部分 ...
- Spring MVC url提交参数和获取参数
[转载:http://blog.csdn.net/mahoking] 普通URL提交参数 该格式url为:url.do?param1=mahc¶m2=8888.00 需 ...
- java—— 编译与运行
内容:使用javac 指定编译多个目录下java文件 链接:http://zhidao.baidu.com/link?url=W5ZERu8_ouGD-L_JH0vqqawhJNitsGbonQAAT ...
- Android打包常见错误之Export aborted because fatal lint errors were found
打包时报如下错误: <ignore_js_op> Export aborted because fatal lint errors were found. These are listed ...
- myeclipse快捷键收集整理
Ctrl+1 快速修复(最经典的快捷键,就不用多说了) Ctrl+D: 删除当前行 Ctrl+Alt+↓ 复制当前行到下一行(复制增加) Ctrl+Alt+↑ 复制当前行到上一行(复制增加) Alt ...
- Apache http强制转为https页面访问(转)
1 在httpd.conf文件里使下面模块生效 LoadModule rewrite_module modules/mod_rewrite.so 2 httpd.conf配置文件或者是在httpd ...