zoukankan      html  css  js  c++  java
  • 移动端上滑下滑换图片

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,initial-scale=1.0,user-scalable=no">
    <style>
    *{
    margin: 0;
    padding: 0;
    list-style: none;

    }
    div img{
       6.4rem;
      height: 10.49rem;
      display: block;
      margin-bottom: 0.5rem;

    }
    </style>
    </head>
    <body>
    <div id="page1">
    <img src="img/06.jpg" alt="">
    </div>
    <div id="page2" style="display: none;">
    <img src="img/07.jpg" alt="" >
    </div>
    <div id="page3" style="display: none;">
    <img src="img/4.jpg" alt="">
    </div>
    <div id="page4" style="display: none;">
    <img src="img/6.jpg" alt="">
    </div>
    <div id="page5" style="display: none;">
    <img src="img/7.jpg" alt="">
    </div>
    <script src="jquery-1.8.3.min.js"></script>
    <script>
    var startY=0,endy=0,flag=false,n=1;
    document.addEventListener('touchstart',function(e){
      startY=e.targetTouches[0].pageY;
      console.log(e);
    },false);
    document.addEventListener('touchmove',function(e){
      endy=e.targetTouches[0].pageY;
      if (startY-endy>100||startY-endy<-100) {
        flag=true;
      }

    },false);
    document.addEventListener('touchend',function(e){
      if (flag) {
        if (startY-endy>100) {
          flag=false;
          if (n>=5) {
            n=5;
            return;
          };
        switch(n){
          case 1:
            $('#page1').slideUp(400).next().show();
            break;
          case 2:
            $('#page2').slideUp(400).next().show();
            break;
          case 3:
            $('#page3').slideUp(400).next().show();
            break;
          case 4:
            $('#page4').slideUp(400).next().show();
            break;
          case 5:
            $('#page5').slideUp(400).next().show();
            break;
          }
        n++;
        };
      if(startY-endy<-100){
        flag=false;
        if (n<=1) {
          n=1;
        };
        switch(n){
          case 5:
            $('#page4').slideDown(400,function(){
              $('#page5').hide();
            });
            break;
          case 4:
            $('#page3').slideDown(400,function(){
              $('#page4').hide();
            });
            break;
          case 3:
            $('#page2').slideDown(400,function(){
              $('#page3').hide();
            });
            break;
          case 2:
            $('#page1').slideDown(400,function(){
              $('#page2').hide();
            });
            break;
         }
         n--;
        }
      }
    },false);
    function fontresize(){
      var Html=document.getElementsByTagName('html')[0];
      var winw=document.documentElement.clientWidth;
      var scale=winw/640;
      Html.style.fontSize=100*scale+'px';

    }
    fontresize();
    window.resize=function(){
      fontresize();
    }
    </script>
    </body>
    </html>

  • 相关阅读:
    VLC 播放完毕后自动退出的问题
    配置Linux文件句柄数
    java获取某一天的邮件
    oracle wm_concat函数将多行转字段函数
    Vue学习(二十五)TS支持
    Vue学习(二十四)render函数
    Vue学习(二十三)路由全攻略
    git commit规范&工具安装使用
    Vue学习(二十二)自定义指令全攻略
    Vue学习(二十一)$emit全攻略
  • 原文地址:https://www.cnblogs.com/SunShineM/p/6011564.html
Copyright © 2011-2022 走看看