问答详情
源自:3-13 移动端项目开发——视口控制

音乐图标单击停止和点击换页的效果出不来

window.onload=function(){

var page1=document.getElementById("page1");

var page2=document.getElementById("page2");

var page3=document.getElementById("page3");

var music = document.getElementsByClassName("music");

var audio = document.getElementsByTagName("audio")[0];

music.addEventListener("touchstart",function(event){

if(audio.paused){

audio.play();

this.setAttribute("class,","play");

//this.style.animationPlayState = "running";

}else{

audio.pause();

this.setAttribute("class","");

//this.style.animationPlayState = "pasued";

};

},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);

};


提问者:qq_慕盖茨4484093 2019-07-10 14:50

个回答

  • AR414
    2020-02-09 16:22:30

    可以参考下我的作品,在老师的基础上我做了优化:

    1、音乐停止与播放时图标指针变化

     2、第二页倒计时显示

     3、展示到第三页的时候绑定上拉下滑翻页。

    github:https://github.com/ar414-com/html5cards 

    效果链接:https://ar414-com.github.io/html5cards/(觉得有帮助可以start一下呗)