Of Stack

Javascript+CSS to achieve image shutter effect ideas and code

  • 2020-03-30 04:11:50
  • OfStack

Those who have used Arcgis must have a deep memory of a curtain effect in Arcmap, so they want to move it to their own WebGIS system. With the same idea, I also did a research on this relatively dazzling curtain effect

See such effect, you are not chicken moved once, hey hey, don't be nasty, listen to me slowly way.

First, the container. Two divs are used to display images of two different periods. Next, set the styles of the two containers. The code: 


#after{ 
position: absolute; 
top: 0px; 
left: 0px; 
background-image: url(../images/24.jpg); 
width: 940px; 
height: 529px; 
background-repeat: no-repeat; 
} 
#before{ 
position: absolute; 
top: 0px; 
left: 0px; 
border-right: 3px solid #f00; 
background-image: url(../images/23.jpg); 
width: 433px; 
height: 529px; 
background-repeat: no-repeat; 
max-width: 940px; 
}


In this way, the picture is displayed on the web.


Next, achieve the curtain effect. To achieve the shutter, the most important thing is to set the width of before, how to set, is to get the mouse position, the code is as follows: 


function RollImage(evt){ 
var x=evt.pageX; 
console.log(x); 
$("#before").css("width",x+"px"); 
} 
/script>

In this way, the effect of the shutter was realized. The source code is as follows:

Style. The CSS 


.beforeafter{ 
width: 940px; 
height: 529px; 
} 
#after{ 
position: absolute; 
top: 0px; 
left: 0px; 
background-image: url(../images/24.jpg); 
width: 940px; 
height: 529px; 
background-repeat: no-repeat; 
} 
#before{ 
position: absolute; 
top: 0px; 
left: 0px; 
border-right: 3px solid #f00; 
background-image: url(../images/23.jpg); 
width: 433px; 
height: 529px; 
background-repeat: no-repeat; 
max-width: 940px; 
}

Test. The HTML 



<html lang="zh-CN" xmlns="http://www.w3.org/1999/xhtml"><head> 
<title> Before and after the earthquake in Japan </title> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<meta http-equiv="Content-Language" content="zh-CN"> 
<link href="css/roll.css" type="text/css" rel="stylesheet"> 
<script src="../jquery-1.8.3.js" type="text/javascript" charset="utf-8"></script> 
<script type="text/javascript"> 
function RollImage(evt){ 
<strong>var x=evt.pageX; 
$("#before").css("width",x+"px");</strong> 
} 
</script> 
</head> 
<body> 
<div class="beforeafter" onmousemove="RollImage(event)"> 
<div id="after"></div> 
<div id="before"> </div> 
</div> 
</body> 
</html>
Related articles: