亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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)的差別

    prototype與jquery下Ajax實現(xiàn)的差別

    Ajax技術(shù)在web中應(yīng)用的相當(dāng)廣泛,最近項目需要用到Ajax,由于主站所用的是Jquey,而某個欄目的開發(fā)用的是prototype,這樣一來就必須對JS代碼做調(diào)整了。
    2009-09-09
  • 怎樣調(diào)用動態(tài)獲取的自定義對象的方法

    怎樣調(diào)用動態(tài)獲取的自定義對象的方法

    怎樣調(diào)用動態(tài)獲取的自定義對象的方法...
    2006-10-10
  • JS如何將秒數(shù)轉(zhuǎn)化為時分秒的形式

    JS如何將秒數(shù)轉(zhuǎn)化為時分秒的形式

    在實際工作中經(jīng)常會遇見把秒數(shù)轉(zhuǎn)化為時分秒的問題,如何處理呢?下面這篇文章主要給大家介紹了關(guān)于JS如何將秒數(shù)轉(zhuǎn)化為時分秒形式的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2023-12-12
  • js操作CheckBoxList實現(xiàn)全選/反選(在客服端完成)

    js操作CheckBoxList實現(xiàn)全選/反選(在客服端完成)

    對于CheckBoxList控件來說,一方面要實現(xiàn)大量數(shù)據(jù)在服務(wù)器端的綁定工作,另一方面往往要求實現(xiàn)全選、反選等功能,接下來將介紹js操作CheckBoxList實現(xiàn)全選/反選,感興趣的朋友可以了解下,或許對你有所幫助
    2013-02-02
  • ES6新特性五:Set與Map的數(shù)據(jù)結(jié)構(gòu)實例分析

    ES6新特性五: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-04
  • jszip插件實現(xiàn)圖片打包下載的方法分析

    jszip插件實現(xiàn)圖片打包下載的方法分析

    這篇文章主要介紹了jszip插件實現(xiàn)圖片打包下載的方法,結(jié)合實例形式分析了JavaScript使用jszip插件依據(jù)圖片列表打包下載zip壓縮文件的相關(guān)操作技巧,需要的朋友可以參考下
    2023-05-05
  • javascript+css 網(wǎng)頁每次加載不同樣式的實現(xiàn)方法

    javascript+css 網(wǎng)頁每次加載不同樣式的實現(xiàn)方法

    用戶每次訪問時隨機(jī)載入樣式,讓微博在視覺上保持新鮮感。雖然思路與實現(xiàn)都比較簡單,但還是想記錄下來,與大家分享。
    2009-12-12
  • javascript正則表達(dá)式基礎(chǔ)知識入門

    javascript正則表達(dá)式基礎(chǔ)知識入門

    很長時間沒看正則表達(dá)式了,碰巧今天用到,溫故知新了一把,這里記錄下來,分享給大家,都是些基礎(chǔ)的知識,重點給大家講解的是正則表達(dá)式中4種常用的方法,50% 的舉一反三練習(xí)中的原創(chuàng)。
    2015-04-04
  • js動態(tài)添加的DIV中的onclick事件簡單實例

    js動態(tài)添加的DIV中的onclick事件簡單實例

    下面小編就為大家?guī)硪黄猨s動態(tài)添加的DIV中的onclick事件簡單實例。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2016-07-07
  • 簡單實現(xiàn)js上傳文件功能

    簡單實現(xiàn)js上傳文件功能

    這篇文章主要教大家如何簡單實現(xiàn)js上傳文件功能,代碼簡單,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2017-08-08

最新評論