                        課程
                    
                        /前端開發
                        
                            /Html5
                        
                        /HTML5+CSS3實現春節賀卡

原代碼

請問有這個小Dame的所有代碼嗎？求解答

慕粉4183705

2016-10-14

源自：HTML5+CSS3實現春節賀卡 3-12

關注問題我要回答

1512

操作

收起

2 回答

Evil1984
2016-10-16

window.onload?=?function(){
????var?music?=?document.getElementById('music');
????var?audio?=?document.getElementsByTagName('audio')[0];
????var?page1?=?document.getElementById('page1');
????var?page2?=?document.getElementById('page2');
????var?page3?=?document.getElementById('page3');
????//音樂停止?動畫停止
????audio.addEventListener("ended",function(event){
????????music.setAttribute("class","");
????},false)
????//點擊停止和播放?音樂?動畫
????music.addEventListener("touchstart",function(event)?{
????????if?(audio.paused)?{
????????????audio.play();
????????????this.setAttribute("class","play");
????????}?else?{
????????????audio.pause();
????????????this.setAttribute("class","");
????????}
????},false)
????//切換頁面
????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)
?????
}

0 回復有任何疑惑可以回復我~

收起回答

Evil1984
2016-10-16

<!DOCTYPE?html>
<html>
<head>
<meta?charset="UTF-8">
<meta?http-equiv="X-UA-Compatible"?content="IE=edge,chrome=1">
<meta?name="viewport"?content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
<meta?name="format-detection"?content="telephone=no">
<title>慕課賀春</title>
<link?rel="stylesheet"?type="text/css"?href="css/style.css">
<script?type="text/javascript"?src="js/script.js"?>
</script>
</head>
<body>
<div>
<img?src="music_pointer.png"?>
<img?id="music"?src="music_disc.png"?>
</div>
<div?id="page1">
<div></div>
<div>點擊屏幕<br>開啟好運2016</div>
<div></div>
<div>2016年慕課網新年特獻</div>
</div>

<div?id="page2">
<div?class="bg?p2_bg_loading"></div>
<div></div>
<div></div>
<div></div>
</div>
<div?id="page3">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<audio?autoplay="true">
<source?src="file:///C:/Users/Administrator/Desktop/imges/happynewyear.mp3"?type="audio/mpeg">
</audio>
</body>
</html>