首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

js微信应用场景之微信音乐相册案例分享

Posted in Javascript onAugust 11, 2017

这个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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

js微信应用场景之微信音乐相册案例分享

- Author -

diasa

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
JS中for循序中延迟加载动态效果的具体实现
Aug 18 Javascript
做好七件事帮你提升jQuery的性能
Feb 06 Javascript
jquery常用操作小结
Jul 21 Javascript
JQueryEasyUI框架下的combobox的取值和绑定的方法
Jan 22 Javascript
详解webpack+angular2开发环境搭建
Jun 28 Javascript
微信小程序之数据缓存的实例详解
Sep 29 Javascript
Node.js微信 access_token ( jsapi_ticket ) 存取与刷新的示例
Sep 30 Javascript
利用nginx + node在阿里云部署https的步骤详解
Dec 19 Javascript
使用JSON格式提交数据到服务端的实例代码
Apr 01 Javascript
ES6 Proxy实现Vue的变化检测问题
Jun 11 Javascript
JS把字符串格式的时间转换成几秒前、几分钟前、几小时前、几天前等格式
Jul 10 Javascript
Vue 实现拨打电话操作
Nov 16 Javascript
Angular模板表单校验方法详解
Aug 11 #Javascript
AngularJs导出数据到Excel的示例代码
Aug 11 #Javascript
Vue 表单控件绑定的实现示例
Aug 11 #Javascript
Angular4实现动态添加删除表单输入框功能
Aug 11 #Javascript
node中使用es5/6以及支持性与性能对比
Aug 11 #Javascript
ionic2屏幕适配实现适配手机、平板等设备的示例代码
Aug 11 #Javascript
JSON对象转化为字符串详解
Aug 11 #Javascript
Word(2) 延时任务(1) 目录管理(1) Get(1) openGauss(1) 日志(1) 条码(1) 二维码(2) Post(1) 太阳码(1)
You might like
Laravel中使用FormRequest进行表单验证方法及问题汇总
2016/06/19 PHP
PHP数组内存利用率低和弱类型详细解读
2017/08/10 PHP
PHP基于回溯算法解决n皇后问题的方法示例
2017/11/07 PHP
一些主流JS框架中DOMReady事件的实现小结
2011/02/12 Javascript
jquery 如何动态添加、删除class样式方法介绍
2012/11/07 Javascript
JS对img进行操作(换图片/切图/轮换/停止)
2013/04/17 Javascript
jquery表单验证框架提供的身份证验证方法(示例代码)
2013/12/27 Javascript
什么是MEAN?JavaScript编程中的MEAN是什么意思？
2014/12/18 Javascript
javascript将异步校验表单改写为同步表单
2015/01/27 Javascript
js改变style样式和css样式的简单实例
2016/06/28 Javascript
jQuery自定义图片上传插件实例代码
2017/04/04 jQuery
基于jQuery选择器之表单对象属性筛选选择器的实例
2017/09/19 jQuery
JavaScript实现仿Clock ISO时钟
2018/06/29 Javascript
详解如何在vue项目中使用eslint+prettier格式化代码
2018/11/10 Javascript
详解Vue.js v-for不支持IE9的解决方法
2018/12/29 Javascript
微信小程序全局变量GLOBALDATA的定义和调用过程解析
2019/09/23 Javascript
[01:31:02]TNC vs VG 2019国际邀请赛淘汰赛 胜者组赛BO3 第一场
2019/08/22 DOTA
python备份文件的脚本
2008/08/11 Python
介绍Python的Urllib库的一些高级用法
2015/04/30 Python
使用Python来编写HTTP服务器的超级指南
2016/02/18 Python
Python实现获取邮箱内容并解析的方法示例
2018/06/16 Python
Python实现删除排序数组中重复项的两种方法示例
2019/01/31 Python
利用pyecharts实现地图可视化的例子
2019/08/12 Python
使用Python为中秋节绘制一块美味的月饼
2019/09/11 Python
使用Pyhton集合set()实现成果查漏的例子
2019/11/24 Python
python模块和包的应用BASE_PATH使用解析
2019/12/14 Python
TensorFlow基本的常量、变量和运算操作详解
2020/02/03 Python
使用Python FastAPI构建Web服务的实现
2020/06/08 Python
Html5让容器充满屏幕高度或自适应剩余高度的布局实现
2020/05/14 HTML / CSS
蔻驰西班牙官网：COACH西班牙
2019/01/16 全球购物
高中毕业自我鉴定范文
2013/10/02 职场文书
忠诚教育心得体会
2014/09/03 职场文书
股东出资证明书范例
2014/10/04 职场文书
企业三严三实学习心得体会
2014/10/13 职场文书
检讨书范文
2015/01/27 职场文书
win10+RTX3050ti+TensorFlow+cudn+cudnn配置深度学习环境的方法
2022/06/25 Servers