Javascript CSS ideas and code to implement image rolling shutter effect

Javascript CSS ideas and code to implement image rolling shutter effect_javascript skills

WBOY

Release： 2016-05-16 16:33:15

Original

1568 people have browsed it

Those who have used Arcgis must have a deep memory of the roller shutter effect in Arcmap, and want to move it to their own WebGIS system. With the same idea, I also like this relatively cool roller shutter. I did some research on the effect, hahaha, it’s out, I’ll report the results to everyone

Seeing this effect, did your chicken move a little bit? Hehe, don’t worry, listen to me slowly.

First, the container. Use two DIVs to display images from two different periods. Next set the styles of the two containers, 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; 
}

Copy after login

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

Next, implement the rolling shutter effect. To implement a rolling shutter, the most important thing is to set the width of before. How to set it is to get the position of the mouse. The code is as follows:

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

Copy after login

In this way, the effect of roller blinds is achieved. The source code is as follows:

style.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; 
}

Copy after login

test.html

<html lang="zh-CN" xmlns="http://www.w3.org/1999/xhtml"><head> 
<title>日本地震灾区前后对比</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>

Copy after login