js写自适应相册

最新推荐文章于 2022-07-07 15:01:18 发布

s1124yy

最新推荐文章于 2022-07-07 15:01:18 发布

阅读量448

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/s1124yy/article/details/79111340

版权

前端专栏收录该内容

17 篇文章 0 订阅

订阅专栏

js写自适应相册

看b站视频写的，果然这种东西随便看看就好了，因为写的根本不怎么样啊，但还算学到一些东西。
视频：https://www.bilibili.com/video/av18386265/

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="Keywords" content="关键词1，关键词2">
  <meta name="Description" content="描述">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>bili-html</title>
  <script>
    //将html标签的font-size设为整个屏幕的 1/3 px
    document.getElementsByTagName("html")[0].style.fontSize=document.documentElement.clientWidth/3 + "px";
  </script>

  <style media="screen">
    * {
      margin: 0;
      padding: 0;
    }
    body {
      font-size: 0.15rem;
      background: #000;
    }
    header {
      position: fixed;
      width: 3rem;
      height: 0.45rem;
      color: #fff;
      text-align: center;
      background: #333;
      line-height: 0.45rem;
      z-index: 1;
    }
    a {
      text-align: center;
      color: #fff;
      text-decoration: none;
    }
    header a {
      position: absolute;
      top: 0.15rem;
      width: 0.5rem;
      height: 0.25rem;
      box-shadow: 0 0 5px #000;
      line-height: 0.25rem;
    }
    header a:nth-child(1) {
      display: none;
      left: 0.15rem;
    }
    header a:nth-child(2) {
      right: 0.15rem;
    }
    section {
      top: 0.45rem;
      /* 不知道怎么改 */
      /* bottom: 0.45rem; */
      position: relative;
    }
    ul li {
      position: absolute;
      list-style: none;
      width: 1rem;
      height: 1rem;
      border: 1px solid red;
      /* 使背景全部可以看见 */
      background-size: 100% 100%;
      /* css3解析盒模型 */
      box-sizing: border-box;
      /* css3动画过渡 */
      transition: left 0.5s, top 1.5s;
    }
    footer {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 3rem;
      height: 0.45rem;
      background: #333;  
    }
    footer a {
      float: left;
      width: 1.5rem;
      height: 1.5rem;
      line-height: 0.45rem;
      box-shadow: 0 0 5px #red;
    }
    footer a:nth-child(1) {
      border-right: 1px solid #ccc;
      box-sizing: border-box;
    }
  </style>
</head>
<body>
  <header>
    <a href="javascript:;" class="btn">删除</a>
    手机相册
    <a href="javascript:;" class="btn">选择</a>
  </header>
  <section>
    <ul id="phone">
    </ul>
  </section>
  <footer>
    <!-- javascript:; 阻止默认跳转 -->
    <a href="javascript:;">手机相册</a>
    <a href="javascript:;">所有相册</a>
  </footer>
  <script type="text/javascript">
    var phone = document.getElementById("phone");
    var html = "";
    var removes = [];
    //载入图片
    for(var i=0;i<10;i++) {
      html += "<li style='background-image:url(images/1" + i + ".jpg)'></li>"
    }
    for(var i=0;i<10;i++) {
      html += "<li style='background-image:url(images/2" + i + ".jpg)'></li>"
    }
    phone.innerHTML = html;
    //定位
    var aLi = phone.getElementsByTagName("li");
    function position() {
      for(var i=0;i<aLi.length;i++) {
        aLi[i].style.left = i%3 + "rem";
        aLi[i].style.top = Math.floor(i/3) + "rem";
      }
    }
    position();
    var aBtn = document.getElementsByClassName("btn");
    aBtn[1].addEventListener("touchend", select);
    aBtn[0].addEventListener("touchend", remove);
    var onOff = true;
    function select() {
      if(onOff) {
        aBtn[1].innerHTML = "取消";
        for(var i=0;i<aLi.length;i++) {
          aLi[i].onOff = true;
          aLi[i].index = i;
          aLi[i].addEventListener("touchend", selectLi);
        }
      } else {
        aBtn[1].innerHTML = "选择";
        for (var i=0;i<aLi.length;i++) {
          aLi[i].removeEventListener("touchend", selectLi);
          aLi[i].style.opacity = 1;
        }
        aBtn[0].style.display = "none";
        removes.length = 0;
      }
      onOff = !onOff;
    }
    function selectLi() {
      if(this.onOff) {
        this.style.opacity = 0.5;
        aBtn[0].style.display = "block";
        removes.push(this.index);
      } else {
        this.style.opacity = 1;
        //把数组中对应索引删除
        for (var i=0;i<removes.length;i++) {
          if (removes[i]==this.index) {
            removes.splice(i, 1);
          }
        }
      }
      this.onOff = !this.onOff;
    }
    function remove() {
      console.log(removes);
      // 由大到小排序，小到大是a-b
      removes = removes.sort(function (a, b) {
        return b - a;
      })
      for (var i=0;i<removes.length;i++) {
        phone.removeChild(aLi[removes[i]]);
      }
      position();
      onOff = false;
      select();
    }
  </script>
</body>
</html>