Home > Developer > Web Develop
Learn how to create H5 applications from scratch-V3.0, loading, background music and automatic switching, h5v3.0
Our first H5 application was made through V1.0 and V2.0, which is getting more and more amazing. This time, we continue to dress her up to make her more beautiful.
TaskImplementationStep 1: Loading Animation1. Add the loading animation before page loading to improve the user experience;
2. Add background music, play automatically, and add control icons to control playback and pause
3. Enable automatic page switch.
Index.html
……<body><div class='loader loader--spinningDisc'></div><div id="pages">……Style.css
.loader { margin: 10em 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: 50%; 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:
Let it automatically hide after the page is loaded, and let the following arrows appear after the page is loaded:
Myfn. js
window.onload = function(){ $(".loader").css("z-index","1"); $(".upicon").css("z-index","1000");}Style.css
. Upicon {width: 60px; height: 60px; position: absolute; left: 50%; bottom: 20px; margin-left:-30px; z-index: 1; // note that this is different from the previous one}Now, the loading animation is ready.
Step 2: Background MusicFirst, we need to prepare the background music materials, preferably pure music, and cut the materials. Because it is a mobile terminal, we need to consider both the traffic issue and the duration of our entire application, and make full use of the features of loop playback.
Because mobile browsers basically support H5, and we are also doing H5-based applications, we directly use H5 labels to insert music into the page.
Index.html
……<audio src="1.mp3" autoplay="autoplay" id="audio" hidden="hidden"></audio>……Refresh the browser again to hear the music we inserted.
Now, we add the control icon and write the function of controlling playing and pausing in myfn. js.
We prepare two images in png format, which are displayed when the music is played and paused,
Add a div with the ID of audioPlay to 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:38px; height: 38px; background-image: url("imgs/music_play.png"); background-repeat: no-repeat; background-size: 100% 100%; position: absolute; top: 5%; right: 5%; z-index: 9999999;}Effect
Then I. js transformation, the code of the page Switch part is encapsulated into an independent function to facilitate automatic later use, in order to avoid conflicts with the music control button, the page switch listener event is bound. page. The transformed myfn. js code is as follows:
Myfn. js
$ (Function () {var curpage = 1; var totalpage, nextpage, lastpage, nexttotalpage; totalpage = $ (". page "). length; nexttotalpage = totalpage + 1; window. onload = function () {$ (". loader "cmd.css (" z-index "," 1 "); $ (". upicon ").css (" z-index "," 1000 "); initAudio (" audio ") ;}var audio; function initAudio (id) {audio = document. getElementById (id);} document. addEventListener ('touchmove ', function (event) {event. preventDefault () ;}, false); // controls the stop and ico icons of music. $ (". 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 () {// determine whether the current page is the last page // obtain the total number of pages, and the sequence number after the total number of pages plus 1 for subsequent for loop use // if the last page is displayed, the first page is displayed and all css effect classes on all pages are removed, otherwise, the next page is displayed, and the animation switching effect if (curpage = totalpage) {for (var I = 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. In the initial state, the music is automatically played and the control button is highlighted. After you click the control button, the music is paused and the icon turns dark, for example:
Step 3: Automatic SwitchThe principle of automatic switching is actually a typical timer function. The Code is as follows:
Myfn. js
…… curpage = nextpage; } } setInterval(function(){ swichpage(); },4000);})// the endIn this way, the page automatically switches to the next page every four seconds.
Well, this transformation is relatively simple, and V3.0 is complete.
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
