js微信應(yīng)用場景之微信音樂相冊案例分享
更新時間:2017年08月11日 16:12:53 作者:diasa
這篇文章主要為大家分享了js微信應(yīng)用場景之微信音樂相冊案例,具有一定的參考價值,感興趣的小伙伴們可以參考一下
這個demo只是一個js微信音樂相冊案例大概思路,具體還需要根據(jù)情況來進(jìn)行
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="reset.css" rel="external nofollow" > <link rel="stylesheet" href="swiper.min.css" rel="external nofollow" > <link rel="stylesheet" type="text/css" href="animate.css" rel="external nofollow" > <style> html,body{ width:100%; height:100%; overflow:hidden; } html{ font-size:100px;/*設(shè)計稿640*960*/ } .main,.swiper-container,.swiper-slide{ width:100%; height:100%; overflow:hidden; } .page1{ position:relative; background:url("../img/swiper/bg1.jpg") no-repeat; background-size:cover; } .page1 img{ position:absolute; opacity:0; } .page1 img:nth-child(1){ left:2rem; top:.28rem; width:.96rem; height:2.32rem; } .page1 img:nth-child(2){ right:0; top:.28rem; width:3.7rem; height:6rem; } .page1 img:nth-child(3){ left:.5rem; bottom:.8rem; width:5.5rem; height:5.12rem; } .page1 img:nth-child(4){ left:-1.6rem; bottom:0; width:7.86rem; height:5.88rem; } /*實現(xiàn)切換完成后頁面中的元素在開始運動的思想:開始的時候當(dāng)前的這個區(qū)域沒有對應(yīng)的ID,當(dāng)切換到這個區(qū)域的時候,我們?yōu)槠湓黾覫D,在css中我們把所有的動畫效果都放在指定的ID下,這樣的話只需要讓區(qū)域有ID,里面的子元素就有動畫了*/ #page1 img:nth-child(1){ /*注意移動端的樣式寫兩套 并且不加webkit的在后*/ -webkit-animation:bounceInLeft 1s linear 0s 1 both; animation:bounceInLeft 1s linear 0s 1 both; } #page1 img:nth-child(2){ /*注意移動端的樣式寫兩套 并且不加webkit的在后*/ -webkit-animation:bounceInRight 1s linear .3s 1 both; animation:bounceInRight 1s linear .3s 1 both; } #page1 img:nth-child(3){ /*注意移動端的樣式寫兩套 并且不加webkit的在后*/ -webkit-animation:bounceInUp 1s linear .6s 1 both; animation:bounceInUp 1s linear .6s 1 both; } #page1 img:nth-child(4){ /*注意移動端的樣式寫兩套 并且不加webkit的在后*/ -webkit-animation:bounceInUp 1s linear .9s 1 both; animation:bounceInUp 1s linear .9s 1 both; } .page2{ position:relative; background:url("../img/swiper/bg2.jpg") no-repeat; background-size:cover; } .page2 img{ position:absolute; top:2.5rem; opacity:0; } .page2 img:nth-child(1){ top:0; left:0; width:3.4rem; height:1.74rem; } .page2 img:nth-child(2){ left:1.48rem; } .page2 img:nth-child(3){ left:3.2rem; } .page2 img:nth-child(4){ left:4.7rem; } #page2 img:nth-child(1){ -webkit-animation:bounceInLeft 1s linear 0s 1 both; animation:bounceInLeft 1s linear 0s 1 both; } #page2 img:nth-child(2){ -webkit-animation:zoomIn 1s linear .3s 1 both; animation:zoomIn 1s linear .3s 1 both; } #page2 img:nth-child(3){ -webkit-animation:zoomIn 1s linear .6s 1 both; animation:zoomIn 1s linear .6s 1 both; } #page2 img:nth-child(4){ -webkit-animation:zoomIn 1s linear .9s 1 both; animation:zoomIn 1s linear .9s 1 both; } .arrow{ position:absolute; left:50%; bottom:.2rem; z-index:10; margin-left:-.24rem; width:.48rem; height:.36rem; background:url("../img/swiper/web-swipe-tip.png") no-repeat; background-size:100% 100%; -webkit-animation:bounce 1s linear 0s infinite both; animation:bounce 1s linear 0s infinite both; } .music{ display:none; position:absolute; top:.2rem; right:.2rem; z-index:10; width:.6rem; height:.6rem; background:url("../audio/music.svg") no-repeat; background-size:100% 100%; } .music.move{ -webkit-animation :musicMove 1s linear 0s infinite both; animation :musicMove 1s linear 0s infinite both; } .music audio{ display:none; } @-webkit-keyframes musicMove{ 0%{ -webkit-transform:rotate(0deg); transform:rotate(0deg); } 100%{ -webkit-transform:rotate(360deg); transform:rotate(360deg); } } @keyframes musicMove{ 0%{ -webkit-transform:rotate(0deg); transform:rotate(0deg); } 100%{ -webkit-transform:rotate(360deg); transform:rotate(360deg); } } </style> </head> <body> <section class='main'> <!--MUSIC--> <div class='music' id='musicMenu'> <audio src="beyond.mp3" preload = 'none' loop autoplay></audio id='musicAudio'> <!-- <audio> <source src='beyond.mp3' type='audio/mpeg'/> <source src='beyond.wav' type='audio/wav'/> <source src='beyond.ogg' type='audio/ogg'/> </audio> --> </div> <!--CONTAINER--> <div class='swiper-container'> <div class='swiper-wrapper'> <div class='swiper-slide page1'> <img src="img/swiper/page1-text1.png" alt=""> <img src="img/swiper/page1-text2.png" alt=""> <img src="img/swiper/page1-text3.png" alt=""> <img src="img/swiper/page1-text4.png" alt=""> </div> <div class='swiper-slide page2'> <img src="img/swiper/page2-text1.png" alt=""> <img src="img/swiper/page2-text2.png" alt=""> <img src="img/swiper/page2-text3.png" alt=""> <img src="img/swiper/page2-text4.png" alt=""> </div> </div> </div> <!--ARROW--> <div class='arrow'></div> </section> <script charset='utf-8' src='swiper.min.js'></script> <script> //rem ~function(){ var desW = 640, winW = document.documentElement.clientWidth, ratio = winW / desW, oMain = document.querySelector(".main"); if(winW>desW){ oMain.style.margin = "0 auto"; oMain.style.width = desW + 'px'; return; } document.documentElement.style.fontSize = ratio*100+"px"; }() new Swiper('.swiper-container',{ direction:"vertical", loop:true, /*當(dāng)切換結(jié)束后,給當(dāng)前展示的區(qū)域添加對應(yīng)的ID,由此實現(xiàn)對應(yīng)的動畫效果*/ onSlideChangeEnd:function(swiper){ var slideAry = swiper.slides;//獲取當(dāng)前一共有多少個活動快(包含loop模式前后多加的兩個) var curIn = swiper.activeIndex;//當(dāng)前展示的這個區(qū)域的索引 var total = slideAry.length; //計算ID是PAGE? var targetId = 'page'; switch(curIn){ case 0: targetId += total - 2; break; case total - 1: targetId += 1; break; default: targetId += curIn } //給當(dāng)前的活動塊設(shè)置ID即可,還要把其余的移除 [].forEach.call(slideAry,function(item,index){ if(curIn === index){ item.id = targetId; return; } item.id = null; }) slideAry[curIn].id = targetId; //最后把a(bǔ)nimate.css里面的動畫to里面添加opacity:1 } }) //MUSIC ~function(){ var musicMenu = document.getElementById('musicMenu'), musicAudio = document.getElementById('musicAudio'); musicMenu.addEventListener('click',function(){ if(musicAudio.paused){ musicAudio.play(); musicMenu.className = "music move"; return; } musicAudio.pause(); musicMenu.className = "music"; }) function controlMusic(){ musicAudio.volume = 0.1; musicAudio.play(); musicAudio.addEventListener('canplay',function(){ musicMenu.style.display = "block"; musicMenu.className = "music move"; }) } window.setTimeout(controlMusic,1000) }() </script> </body> </html>
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
prototype與jquery下Ajax實現(xiàn)的差別
Ajax技術(shù)在web中應(yīng)用的相當(dāng)廣泛,最近項目需要用到Ajax,由于主站所用的是Jquey,而某個欄目的開發(fā)用的是prototype,這樣一來就必須對JS代碼做調(diào)整了。2009-09-09js操作CheckBoxList實現(xiàn)全選/反選(在客服端完成)
對于CheckBoxList控件來說,一方面要實現(xiàn)大量數(shù)據(jù)在服務(wù)器端的綁定工作,另一方面往往要求實現(xiàn)全選、反選等功能,接下來將介紹js操作CheckBoxList實現(xiàn)全選/反選,感興趣的朋友可以了解下,或許對你有所幫助2013-02-02ES6新特性五:Set與Map的數(shù)據(jù)結(jié)構(gòu)實例分析
這篇文章主要介紹了ES6新特性五之Set與Map的數(shù)據(jù)結(jié)構(gòu),結(jié)合實例形式分析了ES6中Set與Map的功能、定義、屬性、結(jié)構(gòu)與相關(guān)使用技巧,需要的朋友可以參考下2017-04-04javascript+css 網(wǎng)頁每次加載不同樣式的實現(xiàn)方法
用戶每次訪問時隨機(jī)載入樣式,讓微博在視覺上保持新鮮感。雖然思路與實現(xiàn)都比較簡單,但還是想記錄下來,與大家分享。2009-12-12javascript正則表達(dá)式基礎(chǔ)知識入門
很長時間沒看正則表達(dá)式了,碰巧今天用到,溫故知新了一把,這里記錄下來,分享給大家,都是些基礎(chǔ)的知識,重點給大家講解的是正則表達(dá)式中4種常用的方法,50% 的舉一反三練習(xí)中的原創(chuàng)。2015-04-04js動態(tài)添加的DIV中的onclick事件簡單實例
下面小編就為大家?guī)硪黄猨s動態(tài)添加的DIV中的onclick事件簡單實例。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-07-07