Home Explore Help
Register Sign In
chenzhiguang
/
SZGD
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

初步完成需求

shaogen1995 3 years ago
parent
5d8d7708ae
commit
625d9b1d29
5 changed files with 151 additions and 2 deletions
Split View Show Diff Stats
  1. 151 2
      index.html
  2. BIN
      static/images/adds/11.png
  3. BIN
      static/images/adds/22.png
  4. BIN
      static/images/adds/33.png
  5. BIN
      static/images/adds/fangda.png

+ 151 - 2
index.html
View File 

@@ -13,13 +13,82 @@
 
   <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>
 
-    </script>
 
   <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>
 
@@ -75,6 +144,8 @@
 
       </div>
 
     </article>
 
   </div>
 
+
 
+  <!-- 点击拍照之后的原显示页面 -->
 
   <div class="app-mask"></div>
 
   <div class="app-alert">
 
     <div class="tips"></div>
 
@@ -93,6 +164,8 @@
 
       <span class="close"></span>
 
     </div>
 
   </div>
 
+
 
+
 
   <div class="app-action-tips">
 
     <div class="content loading">
 
       <div class="lds-spinner">
 
@@ -155,5 +228,81 @@
 
   <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>

BIN
static/images/adds/11.png
View File


BIN
static/images/adds/22.png
View File


BIN
static/images/adds/33.png
View File


BIN
static/images/adds/fangda.png
View File