footer

css/components.css

@@ -707,22 +707,65 @@ body::-webkit-scrollbar-track {
   }
 }
 #imglist {
+  display: none;
+  overflow: scroll;
   position: fixed;
   width: 100vw;
+  box-sizing: border-box;
   height: 100vh;
   top: 0;
   z-index: 1000;
+  background-color: #fff;
+}
+#imglist::-webkit-scrollbar {
+  /*滚动条整体样式*/
+  width: 5px;
+  /*高宽分别对应横竖滚动条的尺寸*/
+  height: 5px;
+}
+#imglist::-webkit-scrollbar-thumb {
+  /*滚动条里面小方块*/
+  border-radius: 10px;
+  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+  background: #999;
+}
+#imglist::-webkit-scrollbar-thumb:hover {
+  background: #2382ff;
+}
+#imglist::-webkit-scrollbar-track {
+  /*滚动条里面轨道*/
+  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+  border-radius: 10px;
+  background: #eee;
+}
+#imglist span {
+  display: block;
+  position: fixed;
+  right: 20px;
+  top: 10px;
+  width: 35px;
+  height: 115px;
   background-color: #000;
+  padding: 5px;
+  border-radius: 5px;
+}
+#imglist span img {
+  width: 25px;
+  position: relative !important;
+  margin: 5px 0;
 }
 #imglist div {
   line-height: 100%;
   position: relative;
+  width: 100%;
+  height: 100%;
 }
 #imglist div img {
   position: absolute;
 }
 #imglist div .glyphicon {
-  color: #fff;
+  position: fixed;
+  color: #000;
   width: 20%;
   max-width: 50px;
   height: 100px;
@@ -734,9 +777,9 @@ body::-webkit-scrollbar-track {
 #imglist div .glyphicon:hover {
   background-color: rgba(247, 237, 237, 0.5);
 }
-#imglist div .pull-left {
-  margin-left: 50px;
+#imglist div .left {
+  left: 50px;
 }
-#imglist div .pull-right {
-  margin-right: 100px;
+#imglist div .right {
+  right: 50px;
 }

css/components.less

@@ -2,6 +2,7 @@
 @title-bg: #e0ecff;
 @body-bg: #2382ff;
 
+
 // 通用样式
 .my-province {
   position: relative;
@@ -44,9 +45,11 @@
       align-items: center;
       flex-wrap: wrap;
       margin: 0;
-      &>li:last-child{
-        color:#f03;
+
+      &>li:last-child {
+        color: #f03;
       }
+
       li {
         padding: 5px;
         width: 60px;
@@ -273,7 +276,8 @@ body {
           width: 50px;
         }
       }
-      div{
+
+      div {
         position: absolute;
         right: 0px;
       }
@@ -366,13 +370,16 @@ body {
   background-color: #fff;
   margin-top: 80px;
   padding: 0 20px;
+
   // 通用样式
-  .my-province{
+  .my-province {
     padding: 20px 0;
-    div{
-     top: 50px;
-   }  
+
+    div {
+      top: 50px;
+    }
   }
+
   @media screen and (max-width:768px) {
     & {
       border-top: 1px solid #eee;
@@ -391,6 +398,7 @@ body {
 
   ul {
     padding-inline-start: 0;
+
     li {
       list-style-type: none;
 
@@ -483,19 +491,22 @@ body {
       width: 100%;
       border-top: 1px solid #e6e6e6;
       padding: 0;
-      list-style:  none;
+      list-style: none;
       overflow: hidden;
+
       // margin: ;
       li {
-        &::before{
+        &::before {
           content: "";
           display: inline-block;
-          width: 6px;height: 6px;
+          width: 6px;
+          height: 6px;
           background-color: #000;
           transform: translateY(-2px);
           margin-right: 5px;
           border-radius: 50%;
         }
+
         color: #777;
         overflow: hidden;
         text-overflow: ellipsis;
@@ -622,7 +633,7 @@ body {
       padding-bottom: 10px;
       margin-bottom: 10px;
       border-bottom: 1px solid #e6e6e6;
-      
+
       &:hover {
         color: #2382ff;
       }
@@ -785,8 +796,9 @@ body {
       }
     }
   }
-  #qrcode{
-    &::before{
+
+  #qrcode {
+    &::before {
       display: block;
       content: "微信扫一扫：分享";
       line-height: 30px;
@@ -794,10 +806,12 @@ body {
       text-align: center;
       background-color: #e6e6e6;
     }
-    img{
+
+    img {
       margin: auto;
       padding: 20px 0;
     }
+
     width: 180px;
     box-sizing: border-box;
     box-shadow: 0px 0px 5px #999;
@@ -807,7 +821,8 @@ body {
     top: -210px;
     border-radius: 5px;
     right: 140px;
-    .wei{
+
+    .wei {
       text-align: center;
     }
   }
@@ -881,23 +896,76 @@ body {
 
   }
 }
+
 // 通用图片轮播观看
-#imglist{
+#imglist {
+  &::-webkit-scrollbar {
+    /*滚动条整体样式*/
+    width: 5px;
+    /*高宽分别对应横竖滚动条的尺寸*/
+    height: 5px;
+  }
+
+
+  &::-webkit-scrollbar-thumb {
+    /*滚动条里面小方块*/
+    border-radius: 10px;
+    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+    background: #999;
+  }
+
+  //  2382ff
+  &::-webkit-scrollbar-thumb:hover {
+    background: @body-bg;
+  }
+
+  &::-webkit-scrollbar-track {
+    /*滚动条里面轨道*/
+    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+    border-radius: 10px;
+    background: #eee;
+  }
+  display: none;
+  overflow: scroll;
   position: fixed;
   width: 100vw;
+  box-sizing: border-box;
   height: 100vh;
   top: 0;
   z-index: 1000;
-  background-color: #000;
-  div{
+  background-color: #fff;
+  span{
+    display: block;
+    position: fixed;
+    right: 20px;
+    top: 10px;
+    width: 35px;
+    height:115px;
+    background-color: #000;
+    padding: 5px;
+    border-radius: 5px;
+    img{
+      width: 25px;
+      position:relative !important;
+      margin: 5px 0;
+    }
+  }
+  div {
     line-height: 100%;
     position: relative;
-img{
-  position:absolute;
-}
-    .glyphicon{
-      &:hover{background-color: rgba(247, 237, 237, 0.5);}
-      color: #fff;
+    width: 100%;
+    height: 100%;
+    // background-color: rgba(0, 0, 0, 0.6);
+    img {
+      position: absolute;
+    }
+
+    .glyphicon {
+      &:hover {
+        background-color: rgba(247, 237, 237, 0.5);
+      }
+      position:fixed;
+      color: #000;
       width: 20%;
       max-width: 50px;
       height: 100px;
@@ -905,12 +973,14 @@ img{
       text-align: center;
       line-height: 100px;
       margin-top: calc(~"50vh - 50px");
-    } 
-    .pull-left{
-      margin-left: 50px;
     }
-    .pull-right{
-      margin-right: 100px;
+
+    .left {
+      left: 50px;
+    }
+
+    .right {
+      right:50px;
     }
   }
 }

h_exam/exam_detail_img.html

@@ -122,8 +122,13 @@
   <div id="imglist">
     <div>
       <img src="../imgs/qq.png" alt="">
-      <div class="glyphicon glyphicon-chevron-left pull-left"></div>
-      <div class="glyphicon glyphicon-chevron-right pull-right"></div>
+      <div class="glyphicon glyphicon-chevron-left left"></div>
+      <div class="glyphicon glyphicon-chevron-right right"></div>
+      <span>
+        <img src="../imgs/jia.png" alt="">
+        <img src="../imgs/jian.png" alt="">
+        <img src="../imgs/back.png" alt="">
+      </span>
     </div>
   </div>
   <!-- 分享功能 -->

js/components.js

@@ -469,14 +469,59 @@ $(function () {
 })
 // 图片观看轮播
 $(function () {
-  let showimglist = Array.from($('.showimglist img')), imglist = [];
+  // 获取图片
+  let showimglist = Array.from($('.showimglist img')), imglist = [], imglistdom = $("#imglist")
+  i = 0, size = 1;
+  $('.showimglist img').click(function () {
+    $("body").css({ "overflow-y": "hidden" })
+    i = showimglist.indexOf(this);
+    imgshow(0)
+    imglistdom.show()
+  })
   showimglist.map(item => {
     imglist.push($(item).data("original"));
   })
-  console.log(imglist);
-  let img = $("#imglist>div>img"), h = 0, w = 0;
-  h = img.css("height") || 0;
-  w = img.css("width") || 0;
-
-  console.log(h, w)
+  function loop (src) {
+    $("#imglist>div>img").attr("src", src);
+    let newimg = new Image();
+    newimg.src = src;
+    newimg.onload = function (e) {
+      let w = this.width / 2,
+        h = this.height / 2;
+      $("#imglist>div>img").css({ "top": `calc(50vh - ${h}px)`, "left": `calc(50vw - ${w}px)` })
+    }
+  }
+  let btns = $("#imglist>div>.glyphicon");
+  function imgshow (num) {
+    i += num;
+    if (i < 0) i = imglist.length - 1;
+    if (i >= imglist.length) i = 0;
+    loop(imglist[i]);
+  }
+  $(btns[0]).click(function (e) {
+    size = 1;
+    scale(0);
+    imgshow(-1);
+  });
+  $(btns[1]).click(function (e) {
+    size = 1;
+    scale(0);
+    imgshow(1);
+  })
+  let btnss = $("#imglist>div>span>img");
+  function scale (num) {
+    size += num;
+    if (size <= 0) size = 0.5;
+    $("#imglist>div>img").css({ "transform": `scale(${size})` })
+  }
+  $(btnss[0]).click(function (e) {
+    scale(0.5);
+  });
+  $(btnss[1]).click(function (e) {
+    scale(-0.5);
+  });
+  $(btnss[2]).click(function (e) {
+    $("body").css({ "overflow-y": "scroll" })
+    imglistdom.hide()
+  });
 })