这篇文章主要为大家分享了js微信应用场景之微信音乐相册案例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

这个demo只是一个js微信音乐相册案例大概思路，具体还需要根据情况来进行

Document

html,body{

width:100%;

height:100%;

overflow:hidden;

}

html{

font-size:100px;/*设计稿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;

}

/*实现切换完成后页面中的元素在开始运动的思想:开始的时候当前的这个区域没有对应的ID，当切换到这个区域的时候，我们为其增加ID，在css中我们把所有的动画效果都放在指定的ID下，这样的话只需要让区域有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);

}

}

//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,

/*当切换结束后，给当前展示的区域添加对应的ID，由此实现对应的动画效果*/

onSlideChangeEnd:function(swiper){

var slideAry = swiper.slides;//获取当前一共有多少个活动快(包含loop模式前后多加的两个)

var curIn = swiper.activeIndex;//当前展示的这个区域的索引

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

}

//给当前的活动块设置ID即可,还要把其余的移除

[].forEach.call(slideAry,function(item,index){

if(curIn === index){

item.id = targetId;

return;

}

item.id = null;

})

slideAry[curIn].id = targetId;

//最后把animate.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)

}()