chenzhiguang
/
SZGD


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319
							<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta content="yes" name="apple-mobile-web-app-capable">
  <meta content="yes" name="apple-touch-fullscreen">
  <meta content="black" name="apple-mobile-web-app-status-bar-style">
  <meta content="telephone=no" name="format-detection">
  <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no,viewport-fit=cover" />
  <title>回望江南—苏州老照片展</title>
  <link rel="stylesheet" type="text/css" href="static/public/animate.min.css" />
  <link rel="stylesheet" type="text/css" href="static/public/swiper-4.3.5.min.css" />
  <link rel="stylesheet" type="text/css" href="static/css/app.css" />
  <script src="static/public/flexible.min.js" async></script>
  <style>
    .BAC {
      z-index: 999;
      background: url('./static/images/adds/1.jpg') no-repeat center;
      background-size: cover;
      width: 100vw;
      height: 100vh;
      position: absolute;
      top: 0;
      left: 0;
      display: block;
      overflow: hidden;
    }

    .BAC_son {
      width: 140px;
      max-width: 240px;
      min-width: 100px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
    }
    .BAC_son img {
      width: 100%;
      height: 100%;
    }
    .but{
      z-index: 1000;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      bottom: 40px;
      display: flex;
      justify-content: space-between;
      width: 70%;
      height: 40px;
    }
    .but img {
      height: 100%;
    }
    .box{
      position: absolute;
      width: 100%;
      height: 85%;
      bottom: 0;
      left: 0;
    }
    .BAC_son .arrows{
      position: absolute;
      right: 0;
      top: 0;
      width: 30px;
      height: 30px;
    }
  </style>
</head>

<body>
  <!-- 背景图和人像图 -->
  <div class="BAC">
    <div class="BAC_son">
      <img class="arrows" src="./static/images/adds/fangda.png" alt="">
      <div class="box">
      </div>
      <img src="./static/images/adds/33.png" alt="">
    </div>
  </div>
  <div class="but">
    <img class="cancel" src="./static/images/adds/22.png" alt="">
    <img src="./static/images/adds/11.png" alt="">
  </div>


  <div class="app-main">
    <div class="ads-swiper swiper-container">
      <div class="swiper-wrapper"></div>
      <div class="swiper-pagination"></div>
    </div>
    <nav class="nav-menu">
      <ul>
        <li><a href="javascript:;" class="btn-pic-take"></a></li>
        <li><a href="javascript:;" class="btn-pic-list"></a></li>
      </ul>
    </nav>
  </div>
  <div class="app-switch">
    <nav class="swt-style clearfix">
      <a href="javascript:;" data-id='1' class="switch active"></a>
      <div></div>
    </nav>
    <div class="stl-swiper swiper-container">
      <div class="swiper-wrapper">
        <div data-msg="1" class="swiper-slide style-1"></div>
        <div data-msg="2" class="swiper-slide style-2"></div>
        <div data-msg="3" class="swiper-slide style-3"></div>
        <div data-msg="4" class="swiper-slide style-4"></div>
        <div data-msg="5" class="swiper-slide style-5"></div>
        <div data-msg="6" class="swiper-slide style-6"></div>
      </div>
    </div>
  </div>
  <div class="my-pic-list">
    <header>
      <div class="home-nav">
        <a class="btn-back"></a>
      </div>
      <div class="tips">
        相片将于您退出后删除，请尽快保存
      </div>
    </header>
    <article>
      <div class="pic-swiper swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <!-- <div class="img">
              <img src="static/images/test.png">
            </div>
            <div class="info">
              <div class="time">
                2010年10月10日 18:00:00
              </div>
              <div class="style style-1"></div>
            </div> -->
          </div>
        </div>
        <div class="swiper-scrollbar"></div>
      </div>
    </article>
  </div>

  <!-- 点击拍照之后的原显示页面 -->
  <div class="app-mask"></div>
  <div class="app-alert">
    <div class="tips"></div>
    <div class="btns">
      <a class="btn-use" href="javascript:;">再次使用</a>
      <a class="btn-link" href="javascript:;">刷新页面</a>
    </div>
  </div>
  <div class="app-view">
    <div class="img"></div>
    <div class="tip">
      <div>
        <div>长按图片保存</div>
        <div>关闭后可在【我的相片】中查看</div>
      </div>
      <span class="close"></span>
    </div>
  </div>


  <div class="app-action-tips">
    <div class="content loading">
      <div class="lds-spinner">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
      </div>
      <div class="tips"></div>
    </div>
    <div class="content loading-switch">
      <div class="lds-spinner">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
      </div>
      <div class="tips">正在切换画风</div>
    </div>
    <div class="content face-6">
      <div class="tips">
        将于1秒后拍摄
      </div>
    </div>
    <div class="content face-5">
      <div class="tips">
        将于2秒后拍摄
      </div>
    </div>
    <div class="content face-4">
      <div class="tips">
        将于3秒后拍摄
      </div>
    </div>
    <div class="content face-3">
      <div class="tips">
        将于4秒后拍摄
      </div>
    </div>
    <div class="content face-2">
      <div class="tips">
        将于5秒后拍摄
      </div>
    </div>
    <div class="content face-1">
      <div class="tips">
        快望向你身前的艺术<br>照设备，准备拍照啦
      </div>
    </div>
  </div>
  <script src="static/public/swiper-4.3.5.min.js"></script>
  <script src="static/public/jquery.min.js"></script>
  <script src="static/js/config.js"></script>
  <script src="static/js/app.js"></script>
  <script src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
</body>
<script>
  // 获取最大盒子的宽高
  let BACwidth =$('.BAC').width()
  let BACheight =$('.BAC').height()
  // 初始盒子的位移
  let BACSonTop =$('.BAC_son').offset().top
  let BACSonLeft =$('.BAC_son').offset().left

  let _x_start, _y_start, _x_move, _y_move, _x_end, _y_end, left_start, top_start;
  $('.box').on('touchstart', function (e) {
    _x_start = e.touches[0].pageX;
    _y_start = e.touches[0].pageY;
    // console.log("start",_x_start)
    left_start = $('.BAC_son').css("left");
    top_start = $('.BAC_son').css("top");
  })

  $('.box').on('touchmove', function (e) {
    //获取当前盒子的宽高
    let BACSonWidth =$('.BAC_son').width()
    let BACSonHeight =$('.BAC_son').height()

    _x_move = e.touches[0].pageX;
    _y_move = e.touches[0].pageY;
    // console.log("move",_x_move)
    let myLeft =parseFloat(_x_move) - parseFloat(_x_start) + parseFloat(left_start)
    if(myLeft<BACSonWidth/2) myLeft=BACSonWidth/2
    if(myLeft>BACwidth-BACSonWidth+BACSonLeft) myLeft=BACwidth-BACSonWidth/2
    let myTop  =parseFloat(_y_move) - parseFloat(_y_start) + parseFloat(top_start)
    if(myTop<BACSonHeight/2) myTop=BACSonHeight/2
    if(myTop>BACheight-BACSonHeight+BACSonLeft) myTop=BACheight-BACSonHeight/2
    $('.BAC_son').css("left", myLeft + "px");
    $('.BAC_son').css("top", myTop + "px");
    // console.log(parseFloat(_y_move) - parseFloat(_y_start) + parseFloat(top_start));
  })
  $('.box').on('touchend', function (e) {
    let _x_end=e.changedTouches[0].pageX;
    let _y_end=e.changedTouches[0].pageY;
  })
  //阻止浏览器下拉事件
  $('BAC').on('touchmove', function (event) {event.preventDefault();});
  
//------------------------------按住箭头放大图片-------------------------
let zoom_xS,zoom_yS,zoom_xE,zoom_yE
$('.arrows').on('touchstart', function (e) {
  //获取初始的手指按下位置
  zoom_xS = e.touches[0].pageX;
  zoom_yS = e.touches[0].pageY;
  // console.log('按住了');
})

$('.arrows').on('touchmove', function (e) {
      //获取当前盒子的宽高
    let BACSonWidth =$('.BAC_son').width()
    let BACSonHeight =$('.BAC_son').height()

  //移动后的手指位置
  zoom_xE = e.touches[0].pageX;
  zoom_yE = e.touches[0].pageY;
  console.log(zoom_xE-zoom_xS,zoom_yE-zoom_yS);
    // console.log('移动了',e.touches[0].pageX,e.touches[0].pageY);
    if(zoom_xE-zoom_xS>0)     $('.BAC_son').css('width',BACSonWidth+5)
  else $('.BAC_son').css('width',BACSonWidth-5)
    // if() $('.BAC_son').css('height',BACSonWidth-3)
    // else $('.BAC_son').css('height',BACSonHeight+3)
})


  // 点击取消
  $('.cancel').on('click',function(e){
    $('.BAC').css('display','none')
    $('.but').css('display','none')
  })

  
</script>

</html>