search

博客列表 >原生相册功能

原生相册功能

再见羊肉串儿
再见羊肉串儿原创
2021年08月04日 16:50:50750浏览
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>相册</title>
  8.     <style>
  9.       /* 通用样式 */
  10.       * {
  11.         margin: 0;
  12.         padding: 0;
  13.         box-sizing: border-box;
  14.       }
  15.       li {
  16.         list-style: none;
  17.       }
  18.       a {
  19.         text-decoration: none;
  20.       }
  21.       .container {
  22.         display: flex;
  23.         flex-flow: row wrap;
  24.         justify-content: space-around;
  25.       }
  27.       .container > .butgirl {
  28.         width: 13rem;
  29.         border: 1px solid green;
  30.         padding: 0.5rem;
  31.         margin-top: 0.5rem;
  32.       }
  34.       .container > .butgirl > img {
  35.         width: 100%;
  36.       }
  38.       /* 按钮 */
  39.       .container > .butgirl > .btn {
  40.         display: flex;
  41.         justify-content: space-between;
  42.         margin-top: 0.5rem;
  43.       }
  44.       .container > .butgirl > .btn > button {
  45.         background-color: green;
  46.         height: 1.5rem;
  47.         border-radius: 0.5rem;
  48.         border: none;
  49.         flex: 0 1 31%;
  50.       }
  51.     </style>
  52.   </head>
  53.   <body>
  54.     <div class="container"></div>
  55.     <script>
  56.       let imgsGroup = [
  57.         "images/img-1.jpg",
  58.         "images/img-4.jpg",
  59.         "images/img-8.jpg",
  60.         "images/img-16.jpg",
  61.         "images/img-24.jpg",
  62.         "images/img-20.jpg",
  63.         "images/img-25.jpg",
  64.         "images/img-39.jpg",
  65.       ];
  66.       // 获取图片容器
  67.       let container = document.querySelector(".container");
  69.       //当页面加载完成之后显示图片
  70.       window.onload = showImgs;
  72.       //图片展示方法
  73.       function showImgs() {
  74.         let res = imgsGroup.reduce(function (prev, curr) {
  75.           let html = `
  76.             <div class="butgirl">
  77.               <img src="${curr}" />
  78.               <div class="btn">
  79.                 <button onclick=goBefer(this)>向前</button>
  80.                 <button onclick=goAfter(this)>向后</button>
  81.                 <button onclick=goDel(this)>删除</button>
  82.               </div>
  83.             </div>
  84.         `;
  85.           return prev + html;
  86.         }, "");
  87.         container.insertAdjacentHTML("afterbegin", res);
  88.       }
  90.       //图片向前
  91.       function goBefer(obj) {
  92.         //获取点击的图片元素
  93.         let father = obj.parentNode.parentNode;
  94.         //点击的图片元素的上一个兄弟元素
  95.         let befor = father.previousElementSibling;
  96.         // console.log(befor);
  97.         if (befor == null) {
  98.           alert("不能向前了！");
  99.           return false;
  100.         }
  101.         // 将兄弟元素插入到点击元素之前
  102.         container.insertBefore(father, befor);
  103.       }
  105.       // 图片向后
  106.       function goAfter(obj) {
  107.         //获取点击的图片元素
  108.         let father = obj.parentNode.parentNode;
  109.         //点击的图片元素的下一个兄弟元素
  110.         let next = father.nextElementSibling;
  111.         // console.log(befor);
  112.         if (next == null) {
  113.           alert("不能向后了！");
  114.           return false;
  115.         }
  116.         // 将点击元素插入到兄弟元素之后
  117.         // dom只提供了
  118.         container.insertBefore(next, father);
  119.       }
  121.       // 图片删除
  122.       function goDel(obj) {
  123.         let father = obj.parentNode.parentNode;
  124.         if (confirm("是否删除？")) father.remove();
  125.       }
  126.     </script>
  127.   </body>
  128. </html>
上一条：8.3日作业下一条：0803 PHP编程作业
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多