Javascript+css to realize the effect of image rolling and the Code _javascript skill

The guys of ArcGIS has a profound memory for the effect of a shutter in ArcMap, want to move it to their own webgis system, holding the same idea, I also to this relatively dazzling shutter effect did a bit of research, Roar, came out, to everyone report the results

See this effect, you are not chicken moved a bit, hey, don't worry, listen to me slowly way.

First, the container. Use two div to display images of two different periods, respectively. Next, set the style of 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; 
} 

This way, the picture is displayed on the web.

Next to achieve the effect of the shutter. To achieve the shutter, the most important thing is to set the width of the before, how to set it, is to get the location of the mouse, 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 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; 
} 

Test.html