js微信應(yīng)用場景之微信音樂相冊案例分享
更新時(shí)間：2017年08月11日 16:12:53 作者：diasa
這篇文章主要為大家分享了js微信應(yīng)用場景之微信音樂相冊案例，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
這個(gè)demo只是一個(gè)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è)計(jì)稿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;
}
/*實(shí)現(xiàn)切換完成后頁面中的元素在開始運(yùn)動(dòng)的思想:開始的時(shí)候當(dāng)前的這個(gè)區(qū)域沒有對應(yīng)的ID，當(dāng)切換到這個(gè)區(qū)域的時(shí)候，我們?yōu)槠湓黾覫D，在css中我們把所有的動(dòng)畫效果都放在指定的ID下，這樣的話只需要讓區(qū)域有ID，里面的子元素就有動(dòng)畫了*/
#page1 img:nth-child(1){
/*注意移動(dòng)端的樣式寫兩套 并且不加webkit的在后*/
-webkit-animation:bounceInLeft 1s linear 0s 1 both;
animation:bounceInLeft 1s linear 0s 1 both;
}
#page1 img:nth-child(2){
/*注意移動(dòng)端的樣式寫兩套 并且不加webkit的在后*/
-webkit-animation:bounceInRight 1s linear .3s 1 both;
animation:bounceInRight 1s linear .3s 1 both;
}
#page1 img:nth-child(3){
/*注意移動(dòng)端的樣式寫兩套 并且不加webkit的在后*/
-webkit-animation:bounceInUp 1s linear .6s 1 both;
animation:bounceInUp 1s linear .6s 1 both;
}
#page1 img:nth-child(4){
/*注意移動(dòng)端的樣式寫兩套 并且不加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，由此實(shí)現(xiàn)對應(yīng)的動(dòng)畫效果*/
onSlideChangeEnd:function(swiper){
var slideAry = swiper.slides;//獲取當(dāng)前一共有多少個(gè)活動(dòng)快（包含loop模式前后多加的兩個(gè)）
var curIn = swiper.activeIndex;//當(dāng)前展示的這個(gè)區(qū)域的索引
var total = slideAry.length;
//計(jì)算ID是PAGE?
var targetId = 'page';
switch(curIn){
case 0:
targetId += total - 2;
break;
case total - 1:
targetId += 1;
break;
default:
targetId += curIn
}
//給當(dāng)前的活動(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里面的動(dòng)畫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)文章
這篇文章主要介紹了js跨域請求的5中解決方式的相關(guān)資料,需要的朋友可以參考下2015-07-07
用nodejs實(shí)現(xiàn)PHP的print_r函數(shù)代碼
這篇文章主要介紹了用nodejs實(shí)現(xiàn)PHP的print_r函數(shù)代碼,需要的朋友可以參考下2014-03-03
javascript常見數(shù)據(jù)驗(yàn)證插件大全
這篇文章主要介紹了javascript常見數(shù)據(jù)驗(yàn)證插件大全,需要的朋友可以參考下2015-08-08
基于JS實(shí)現(xiàn)蜘蛛俠動(dòng)作游戲的示例代碼
這篇文章主要介紹了如何利用JavaScript實(shí)現(xiàn)簡單的蜘蛛俠動(dòng)作游戲，文中的示例代碼講解詳細(xì)，對我們學(xué)習(xí)JavaScript游戲開發(fā)有一定的幫助，需要的可以參考一下2022-06-06
js如何比較兩個(gè)日期的時(shí)間大小簡單代碼示例
在JavaScript中,日期比較涉及評估兩個(gè)日期,以確定一個(gè)日期是早于、晚于另一個(gè)日期還是與另一個(gè)日期相同,這篇文章主要給大家介紹了關(guān)于js如何比較兩個(gè)日期的時(shí)間大小的相關(guān)資料,需要的朋友可以參考下2024-06-06
用JavaScript腳本實(shí)現(xiàn)Web頁面信息交互
這篇文章主要介紹了用JavaScript腳本實(shí)現(xiàn)Web頁面信息交互2006-10-10
這篇文章主要介紹了JS實(shí)現(xiàn)點(diǎn)擊掉落特效,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-01-01
javascript十個(gè)最常用的自定義函數(shù)(中文版)
如果不使用類庫或者沒有自己的類庫，儲(chǔ)備一些常用函數(shù)總是有好處的。2009-09-09
在本篇文章中小編給大家分享了關(guān)于javascript中floor使用的知識點(diǎn)內(nèi)容，有興趣的朋友們學(xué)習(xí)下。2019-02-02
JS動(dòng)態(tài)添加選項(xiàng)案例分析
這篇文章主要介紹了JS動(dòng)態(tài)添加選項(xiàng)的方法,結(jié)合實(shí)例形式分析了javascript針對頁面元素動(dòng)態(tài)操作的相關(guān)技巧,需要的朋友可以參考下2016-10-10