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.
TaskImplementFirst step: Loading animation1, 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.
Index.html
……<body><div class=‘loader loader--spinningDisc‘></div><div id="pages">……
Style.css
. 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); }}Effect:
We have it automatically hidden after the page is loaded and the following arrows appear after the page has finished loading:
Myfn.js
function(){ $(".loader").css("z-index","1"); $(".upicon").css("z-index","1000");}
Style.css
. 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 musicWe 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.
Index.html
……<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:
Index.html
……<audio src="1.mp3" autoplay="autoplay" id="audio" hidden="hidden"></audio><div id="audioPlay"></div>……
Style.css
#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 ;}Effect
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:
Myfn.js
$( 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 EndRefresh 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 switchingThe principle of automatic switching is actually a typical timer function, the code is as follows:
Myfn.js
…… 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
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
