zoukankan      html  css  js  c++  java
  • 两张图片对比效果

    我有个不好的脑子,自己做过的功能,过个两个月我就忘记了,疫情期间的面试也让我受打击,嗨,没事了,把自己弄的案例总结一下,不装逼,直接贴代码

     1   <div class="palette">
     2     <div class="paletteIn wow bounceIn">
     3       <h2 class="paletteIn_title">{{tuozhuaiDesc.title}}</h2>
     4       <p class="paletteIn_p">{{tuozhuaiDesc.desc}}</p>
     5       <div class="warpp">
     6         <div id="box" ref="box">
     7           <div id="left" ref="left" :style="{'background-image': 'url('+ tuozhuaiDesc.anImg +')'}"></div>
     8           <div id="resize" ref="resize">
     9             <div class="resize_icon">
    10             </div>
    11           </div>
    12           <img :src="tuozhuaiDesc.liangImg" class="right_abc" style="1200px;height:666px" />
    13         </div>
    14       </div>
    15       <div class="palette_b_t">
    16         <p>{{tuozhuaiDesc.anDesc}}</p>
    17         <p>{{tuozhuaiDesc.liangDesc}}</p>
    18       </div>
    19     </div>
    20   </div>
     1   mounted() {
     2     this.dragControllerDiv();
     3   },
     4   methods: {
     5     dragControllerDiv: function() {
     6       var box = document.getElementById("box");
     7       var left = document.getElementById("left");
     8       // var right = document.getElementById("right");
     9       var resize = document.getElementById("resize");
    10 
    11       resize.onmousedown = function(e) {
    12         var startX = e.clientX;
    13         resize.left = resize.offsetLeft;
    14 
    15         document.onmousemove = function(e) {
    16           var endX = e.clientX;
    17 
    18           var moveLen = resize.left + (endX - startX);
    19 
    20           var maxT = box.clientWidth - resize.offsetWidth;
    21 
    22           if (moveLen < 30) moveLen = 30;
    23           if (moveLen > maxT - 30) moveLen = maxT - 30;
    24 
    25           resize.style.left = moveLen;
    26           left.style.width = moveLen + "px";
    27           // right.style.width = box.clientWidth - moveLen - 5 + "px";
    28         };
    29 
    30         document.onmouseup = function(evt) {
    31           document.onmousemove = null;
    32           document.onmouseup = null;
    33           resize.releaseCapture && resize.releaseCapture();
    34         };
    35         resize.setCapture && resize.setCapture();
    36         return false;
    37       };
    38     }
    39   }
    小凤凰newObject
  • 相关阅读:
    hdu 2203 亲和串
    hdu 3999 The order of a Tree
    poj 2299 Ultra-QuickSort
    hdu 1908 Double Queue
    hdu 1556 Color the ball
    hdu 4288 Coder
    hdu 5265 pog loves szh II
    hdu 5058 So easy
    T103763 【模板】矩阵乘法
    T103492 【模板】点双连通分量
  • 原文地址:https://www.cnblogs.com/xiaofenghuang/p/13036827.html
Copyright © 2011-2022 走看看