JAVASCRIPT+CSS realization of the image roll-curtain effect

Used ArcGIS cheese for arcmap inside of a rolling shutter effect is sure to remember very deep, want to move it to their own webgis system, holding the same idea, I also on this kind of more dazzling shutter effect did a bit of research, Roar, come out, give us a report on the results, first look at a picture:

roller shutter effect

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

First, the container. Use two div to display two images of different periods. Next, set the two container's style, 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, you implement the swipe effect. To implement the shutter, the main 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 realized. 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

 Javascript+css to implement an image roll effect