Those who have used Arcgis must have a deep memory of the effect of a roller shutter in Arcmap. They want to move it to their WebGIS system. With the same idea, I have also done some research on this dazzling roller shutter effect. It's out and report the results to everyone.
Seeing this effect, did you move the chick? Hehe, don’t worry, listen to me slowly.
First, container. Two DIVs are used to display images from two different periods. Next, set the style of the two containers, code:
#before{ 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 image will be displayed on the web.
Next, achieve the roller shutter effect. To implement the roller shutter, the most important thing is to set the width of before. How to set it? 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>In this way, the effect of the roller 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
<html lang="zh-CN" xmlns="http://www.w3.org/1999/xhtml"><head> <title>Comparison before and after the earthquake-stricken areas 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 onmousemove="RollImage(event)"> <div id="after"></div> <div id="before"> </div> </body> </html>