首页手记炎炎夏日的炙热相册——还会滑动哦~

炎炎夏日的炙热相册——还会滑动哦~

标签：

JavaScript

在一个炎炎夏日，我用JS做了个手机滑动相册，欢迎来挑战，一起交流~


<!DOCTYPE html>
<html>

 <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0">
  <title>滑动相册</title>
 </head>

 <body>
  <style>
   body {
    margin: 0;
   }
   .film1 {
    background: #007AFF;
   }
   .film2 {
    background: #4BAD4B;
   }
   .film3 {
    background: #AA4B00;
   }
   .film4 {
    background: #E56C0C;
   }
   .film5 {
    background: #FFC64B;
   }
   .picbox {
    width: 120px;
    height: 200px;
    float: left;
    margin: 50px 25px;
    transition-duration: 0.5s;
   }
   .albumof {
    overflow: hidden;
   }
   .albumbox {
    position: absolute;
   }
   .scalebox {
    width: 120px;
    height: 200px;
   }
   .clear {
    clear: both;
   }
  </style>
  <div style="height: 30px;"></div>
  <div class="albumof">
   <div class="albumbox" id="albumbox">

    <div class=" picbox">
     <div class="scalebox film1"></div>
    </div>
    <div class=" picbox">
     <div class="scalebox film2"></div>
    </div>
    <div class=" picbox">
     <div class="scalebox film3"></div>
    </div>
    <div class=" picbox">
     <div class="scalebox film4"></div>
    </div>
    <div class=" picbox">
     <div class="scalebox film5"></div>
    </div>

    <div class=" picbox">
     <div class="scalebox film1"></div>
    </div>
    <div class=" picbox">
     <div class="scalebox film2"></div>
    </div>
    <div class=" picbox">
     <div class="scalebox film3"></div>
    </div>
    <div class=" picbox">
     <div class="scalebox film4"></div>
    </div>
    <div class=" picbox">
     <div class="scalebox film5"></div>
    </div>

    <div class="clear"></div>
   </div>
  </div>

<script src='/static/lib/jquery/1.11.3/jquery.min.js'></script>

  <script>
   var ow = $(".picbox").outerWidth(true);
   var w = $(".picbox").width();
   var h = $(".picbox").height();
   var count = $(".picbox").length;
   var totallength = ow * count;
   $(".albumbox").width(totallength);
   var albumofw = $(".albumof").width();
   var albleft = ow * 1.5 - albumofw / 2;
    //  var albleft = 0;
   var falbleft = -albleft;
   $(".albumbox").css("-webkit-transform", "translateX(" + falbleft + "px)");
    //触摸移动
   var albumbox = document.getElementById("albumbox");
   var x = 0;
   var x1 = 0;

   var v = 0;
   var ismove = 0;
   albumbox.addEventListener("touchstart", function(event) {
    if (event.targetTouches.length == 1) {　　　　
     event.preventDefault(); // 阻止浏览器默认事件，重要
     var touch = event.targetTouches[0];
     // 把元素放在手指所在的位置
     x = touch.pageX;
     ismove = 0;
    }
   });

   function scalebox() {
    var cw = w * 2;
    var picboxlist = $(".picbox");
    picboxlist.each(function() {
     var picbox = $(this);
     //var picbox = $(".picbox").eq(3);
     var f3x = picbox.offset().left;
     var c = f3x + (w / 2);
     var boxabs = Math.abs(f3x + (w / 2) - (albumofw / 2));
     if (boxabs < cw) {
      var sc = Math.cos(boxabs / cw) * 1.3;
      sc = sc < 1 ? 1 : sc;
      picbox.find(".scalebox").css("-webkit-transform", "scale(" + sc + "," + sc + ")");
     }
    })
   };
   scalebox();
   albumbox.addEventListener("touchmove", function(event) {
    if (event.targetTouches.length == 1) {　　　　
     event.preventDefault(); // 阻止浏览器默认事件，重要
     var touch = event.targetTouches[0];
     // 把元素放在手指所在的位置
     nx = touch.pageX;

     x1 = x;
     var offset = nx - x;
     falbleft += offset;
     move(falbleft);
     x = nx;
    }
   });

   function move(falbleft) {
    //左端
    if (falbleft > (albumofw / 2 - ow / 2)) {
     v = 0;

     falbleft = (albumofw / 2 - ow / 2);

    }
    //右端
    if (falbleft < -(totallength - (albumofw / 2 + ow / 2))) {
     v = 0;
     falbleft = -(totallength - (albumofw / 2 + ow / 2));

    }
    $(".albumbox").css("-webkit-transform", "translateX(" + falbleft + "px)");
    scalebox();
   };
    //惯性 dt代表阻力
   function slow() {
    if (ismove) {
     var dt = 0.4;
     //console.dir(v);
     falbleft += v;
     move(falbleft);
     if (v > 2) {
      v = v - dt;
      setTimeout(function() {
       slow();
      }, 10);
     } else if (v < -2) {
      v = v + dt;
      setTimeout(function() {
       slow();
      }, 10);
     }
    }
   };
   albumbox.addEventListener("touchend", function(event) {
    v = nx - x1;
    ismove = 1;
    setTimeout(function() {
     slow();
    }, 10);
   });
  </script>

 </body>

</html>

代码作者：慕课网PHP开发攻城狮

点击查看更多内容