Learn from scratch H5 application--v3.0 version, loading, background music and automatic switching

Source: Internet
Author: User

Our first H5 application, made by V1.0 and V2.0, has become more and more amazing, and this time we continue to dress her up and make her more beautiful.


1, add the loading animation before the page loading, enhance the user experience;
2, add background music, auto play, and added control icon, can control play and pause
3, let the page to achieve automatic switching.

ImplementFirst step: Loading animation


……<body><div class=‘loader loader--spinningDisc‘></div><div id="pages">……


. Loader {  margin: tenem auto;  z-index:10000; }. Loader--spinningdisc { Border: solid 0.5em #9b59b6  ; border-right-color: Transparent ; border-left-color: Transparent ; padding: 0.5em ; width: 2em ; height: 2em ; Border-radius: % ; background: #3498db  ; background-clip: content-box ; animation: spindisc 1.5s linear infinite ;}@keyframes spindisc{50%{  border-top-color: #3498db;         border-bottom-color: #3498db;     background-color: #2ecc71; }100%{  transform: Rotate (1turn); }}


We have it automatically hidden after the page is loaded and the following arrows appear after the page has finished loading:


function(){    $(".loader").css("z-index","1");    $(".upicon").css("z-index","1000");}


. Upicon { width: px ; height: px ; position: Absolute ;Left  : % ; Bottom: px ; margin-left: -px ; z-index: 1  ;//Note that this differs from the previous}

OK, the loading animation will be handled well.

Step Two: Background music

We must first prepare the material of the background music, preferably pure music, and after cutting, because it is mobile, we need to consider the flow problem, but also take into account the duration of our entire application, and make full use of the characteristics of the loop playback.

Since mobile browsers basically support H5, and we do it based on H5 applications, we use H5 tags to insert music into the page directly.


……<audio src="1.mp3" autoplay="autoplay" id="audio" hidden="hidden"></audio>……

Refresh your browser again to hear the sweet music we've inserted.

Now, we add the control icon and write the function to control the play and pause in the myfn.js.

We prepare two images in PNG format, which are displayed when the music is played and paused,

Add a div with ID audioplay in the page to display the image:


……<audio src="1.mp3" autoplay="autoplay" id="audio" hidden="hidden"></audio><div id="audioPlay"></div>……


#audioPlay { width: +px ; Height: + px ; background-image: url ("imgs/music_play.png")  ; background-repeat: no-repeat ; background-size:   ; position: Absolute ; top: 5 ;Right  : 5 ; z-index: 9999999  ;}


Then I modified the myfn.js, the page switch part of the code encapsulated as a separate function function, easy to use after automatic switching, in order to avoid conflicts with the music control button, the page switch listener events bound to the. Page. The modified myfn.js all codes are as follows:


$( function(){    varCurpage=1;varTotalpage,nextpage,lastpage,nexttotalpage; Totalpage = $ (". Page"). length; Nexttotalpage = Totalpage +1; Window.onload = function(){$(". Loader"). CSS ("Z-index","1"); $(". Upicon"). CSS ("Z-index","+"); InitAudio ("Audio"); }varAudio function initaudio(id){Audio = document.getElementById (ID); } document.addeventlistener (' Touchmove ', function(event){Event.preventdefault (); },false);//Control music playback stop and music ico icon transform$(". Page"). Swipeup ( function(){Swichpage (); })    $("#audioPlay"). On (' click ', function(){        if(audio.paused) {Audio.play (); This. style.backgroundimage="url (imgs/music_play.png)"; }Else{Audio.pause (); This. style.backgroundimage="url (imgs/music_pause.png)"; }    }); function swichpage() {//Determines whether the current page is the last page        //Get the total number of pages, plus +1 of the total pages, for the back for loop use        //If this is the last page, display the first page and remove all CSS effect classes on the page, otherwise display the next page and remove the toggle animation effect from the previous page        if(Curpage = = totalpage) { for(vari =1; i < nexttotalpage; i++) {$ (". Page"+ i). Removeclass ("Hide"); $(". Page"+ i). Removeclass ("Show"); $(". Page"+ i). Removeclass ("Pt-page-movefrombottomfade"); }            $(". Page1"). AddClass ("Show"); $(". Page1"). AddClass ("Pt-page-movefrombottomfade"); Curpage =1; }Else{nextpage = Curpage +1; LastPage = Curpage-1; $(". Page"+ curpage). Removeclass ("Pt-page-movefrombottomfade"); $(". Page"+ curpage). addclass ("Pt-page-movetotopfade"); $(". Page"+ curpage). Removeclass ("Show"); $(". Page"+ curpage). addclass ("Hide"); $(". Page"+ nextpage). Removeclass ("Hide"); $(". Page"+ nextpage). addclass ("Show"); $(". Page"+ nextpage). addclass ("Pt-page-movefrombottomfade"); $(". Page"+ lastpage). Removeclass ("Pt-page-movetotopfade");        Curpage = nextpage; }    }})//the End

Refresh the browser again, the initial state of the music automatically play, and the control button is bright, click the control button, the music pauses play, the icon becomes dark color, such as:

Step three: Automatic switching

The principle of automatic switching is actually a typical timer function, the code is as follows:


……            curpage = nextpage;        }    }  setInterval(function(){        swichpage();    },4000);})// the end

This enables the ability of the page to automatically switch to the next page every four seconds.

Well, this time the transformation is relatively simple, the V3.0 version is done.

Learn from scratch H5 application--v3.0 version, loading, background music and automatic switching

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.