js微信应用场景之微信音乐相册案例分享
程序员文章站
2022-03-27 08:35:16
这个demo只是一个js微信音乐相册案例大概思路，具体还需要根据情况来进行
这个demo只是一个js微信音乐相册案例大概思路，具体还需要根据情况来进行
<!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;/*设计稿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);
}
}
</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,
/*当切换结束后，给当前展示的区域添加对应的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)
}()
</script>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。