window.onload = function() {
// console.log(document.body.clientWidth);
var music = document.getElementById("music");
var audio = document.getElementsByTagName("audio")[0];
// 音乐播放完之后自动停止光盘转动
audio.addEventListener("ended", function(event) {
music.setAttribute("class", "");
}, false);
// 点击音乐图标改变音乐的状态
music.onclick = function() {
if (audio.paused) {
audio.play();
this.setAttribute("class", "play");
// this.style.animationPlayState = "running";
// this.style.webkitAnimationPlayState = "running";
} else {
audio.pause();
this.setAttribute("class", "");
// this.style.animationPlayState = "paused";
// this.style.webkitAnimationPlayState = "paused";
}
}
/*
// 触摸屏幕图标改变音乐状态
music.addEventListener("touchstart", function(event) {
if (audio.paused) {
audio.play();
this.setAttribute("class", "play");
} else {
audio.pause();
this.setAttribute("class", "");
}
}, false);
*/
// 点击屏幕开启好运2018
page1.onclick = function() {
page1.style.display="none";
page2.style.display="block";
page3.style.display="block";
page3.style.top="100%";
setTimeout(function(){
page2.setAttribute("class", "page fadeOut");
page3.setAttribute("class", "page fadeIn");
}, 5500);
}
/*
// 触摸屏幕屏幕开启好运2018
page1.addEventListener("touchstart", function(event){
page1.style.display="none";
page2.style.display="block";
page3.style.display="block";
page3.style.top="100%";
setTimeout(function(){
page2.setAttribute("class", "page fadeOut");
page3.setAttribute("class", "page fadeIn");
}, 5500);
}, false);
*/
}
html+css+js制作的一个动态的新年贺卡
需积分: 48 11 浏览量
2017-10-03
19:12:32
上传
评论 37
收藏 3.75MB ZIP 举报
qq_175****220
- 粉丝: 391
- 资源: 11
最新资源
- Unity适用于Windows与移动平台双端的轮盘交互式提示菜单
- UE5/UE4超详细教程接入科大讯飞语音唤醒SDK并初始持久监听(10102错误码解决)
- 靠搬运古装剧解说视频,日收益200+,作品原创度90%以上,超详细教程-教程网盘链接提取码下载 .txt
- 2024最强数学建模之美赛攻略.md
- STM32单片机FPGA毕设电路原理论文报告一种机器人寻线控制系统
- STM32单片机FPGA毕设电路原理论文报告一种光电编码器位置检测系统研究与应用
- linux常用命令大全
- ACM题库,分类整理.md
- STM32单片机FPGA毕设电路原理论文报告一种高速折刀运动控制系统的设计与实现
- ZYWIFI0939C循迹、红外避障、遥控综合程序.plg
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈