vue实现两张照片拖动对比效果代码-html代码-BFW代码库

vue实现两张照片拖动对比效果代码

代码语言：html

所属分类：拖放

代码描述：vue实现两张照片拖动对比效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum=1.0,minimum=1.0,user-scalable=0" />

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue@2.6.1.js"></script>

     <style>
     
.container {
  height: 73.5vw;
  margin: 1vw auto;
  max-height: 750px;
  max-width: 1000px;
  overflow: hidden;
  width: 98vw;
}
.container figure {
  background-image: url(//repo.bfw.wiki/bfwrepo/image/60078abad6d5a.png);
  background-size: cover;
  font-size: 0;
  height: 100%;
  margin: 0;
  position: relative;
  width: 100%;
}
#compare {
  background-image: url(//repo.bfw.wiki/bfwrepo/image/60078a8d5f89d.png);
  background-size: cover;
  bottom: 0;
  border-right: 5px solid rgba(255,255,255,0.7);
  box-shadow: 10px 0 15px -13px #000;
  height: 100%;
  max-width: 98.6%;
  min-width: 0.6%;
  overflow: visible;
  position: absolute;
  width: 50%;
  animation: first 2s 1 normal ease-in-out 0.1s;
  -webkit-animation: first 2s 1 normal ease-in-out 0.1s;
}
input#slider {
  -moz-appearance: none;
  -webkit-appearance: none;
  border: none;
  background: transparent;
  cursor: col-resize;
  height: 100vw;
  left: 0;
  margin: 0;
  outline: none;
  padding: 0;
  position: relative;
  top: -100vw;
  width: 100%;
}
input#slider::-moz-range-track {
  background: transparent;
}
input#slider::-ms-track {
  border: none;
  background-color: transparent;
  height: 100vw;
  left: 0;
  outline: none;
  position: relative;
  top: -100vw;
  width: 100%;
  margin: 0;
  padding: 0;
  cursor: col-resize;
  color:transparent;
}
input#slider::-ms-fill-lower {
  background-color:transparent;
}
input#slider::-webkit-slider-thumb {
  -webkit-appearance:none;
  height: 100vw;
  width: 0.5%;
  opacity: 0;
}
input#slider::-moz-range-thumb {
  -moz-appearance: none;
  height: 100vw;
  width: 0.5%;
  opacity: 0;
}
input#slider::-ms-thumb {
  height: 100vw;
  width: 0.5%;
  opacity:0;
}
input#slider::-ms-tooltip {
  display:none;
}
#compare::before {
  background: url("data:image/svg+xml,%3Csvg width='48' height='48' viewBox='0 0 48 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M24 44C35.0457 44 44 35.0457 44 24C44 12.9543 35.0457 4 24 4C12.9543 4 4 12.9543 4 24C4 35.0457 12.9543 44 24 44Z' fill='%23F3EFEF' stroke='%23292D32' stroke-width='3' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M19 16L10 24L19.........完整代码请登录后点击上方下载按钮下载查看