1 <style> 2 body,div,span,p{ 3 margin:0; 4 padding:0; 5 } 6 .bg{ 7 margin:0 auto; 8 position:relative; 9 width: 1200px; 10 height: 675px; 11 background: url("img/img-original.jpg") center center no-repeat; 12 } 13 .bg2{ 14 width: 25px; 15 height: 675px; 16 background: url("img/img-modified.jpg") 0 0 no-repeat; 17 overflow: hidden; 18 transition:transform .25s linear; 19 } 20 .bg span:nth-of-type(1){ 21 position: absolute; 22 left: 10px; 23 bottom: -25px; 24 font-size: 20px; 25 color: white; 26 font-weight: 900; 27 transition:all .25s linear; 28 } 29 .bg span:nth-of-type(2){ 30 position:absolute; 31 right: 10px; 32 bottom: -25px; 33 font-size: 20px; 34 color: white; 35 font-weight: 900; 36 transition:all .25s linear; 37 } 38 .pot{ 39 position: absolute; 40 top: 312px; 41 left: 575px; 42 width: 50px; 43 height: 50px; 44 border-radius:50%; 45 text-align: center; 46 font-size: 24px; 47 line-height: 50px; 48 color: white; 49 font-weight: 900; 50 background-color:deeppink; 51 cursor: pointer; 52 -webkit-transform:scale(0); 53 -moz-transform:scale(0); 54 -ms-transform:scale(0); 55 -o-transform:scale(0); 56 transform:scale(0); 57 /*不能使用all，因为在拖拽时会有0.25s的延迟*/ 58 transition: transform .25s linear .25s; 59 } 60 </style>
html
1 <div class="bg"> 2 <div class="bg2"></div> 3 <div class="pot">< ></div> 4 <span class="modified">modified</span> 5 <span class="original">original</span> 6 </div>
JS
1 var pot=document.getElementsByClassName("pot")[0]; 2 var bg2=document.getElementsByClassName("bg2")[0]; 3 var modified=document.getElementsByClassName("modified")[0]; 4 var original=document.getElementsByClassName("original")[0]; 5 window.onload=function(){ 6 pot.style="-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1)"; 7 bg2.style.width="600px"; 8 modified.style.bottom="5px"; 9 original.style.bottom="5px"; 10 } 11 pot.onmousedown=function(){ 12 var e=window.event||arguments[0]; 13 var downX= e.clientX; 14 var positionX=parseInt(document.defaultView.getComputedStyle(pot,null).left); 15 var chaX=downX-positionX; 16 var bg2W=parseInt(bg2.style.width); 17 18 pot.onmousemove=function(){ 19 var e=window.event||arguments[0]; 20 var X= e.clientX; 21 var left = parseInt(X)-chaX; 22 if(left>=0&&left<=1150){ 23 if(left<=100){ 24 modified.style.opacity="0"; 25 }else{ 26 modified.style.opacity="1"; 27 } 28 if(left>=1075){ 29 original.style.opacity="0"; 30 }else{ 31 original.style.opacity="1"; 32 } 33 pot.style.left=left+"px"; 34 bg2.style.width=bg2W+X-downX+"px"; 35 } 36 } 37 38 document.onmouseup=function(){ 39 pot.onmousemove=null; 40 } 41 }