两张图片对比效果

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

 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="width: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   }

标签：document,30,两张,left,var,moveLen,对比,resize,图片
来源： https://www.cnblogs.com/xiaofenghuang/p/13036827.html