Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 原生相册功能
Blogger Information
Blog 17
fans 0
comment 0
visits 12806
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
原生相册功能
再见羊肉串儿
Original
749 people have browsed it
  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>
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post