Aquellos que han usado ArcGIS deben tener un recuerdo profundo del efecto de un obturador de rodillos en ArcMap. Quieren moverlo a su sistema webgis. Con la misma idea, también he investigado un poco sobre este deslumbrante efecto de obturador. Está fuera e informa los resultados a todos.
Al ver este efecto, ¿moviste a la chica? Jeje, no te preocupes, escúchame lentamente.
Primero, contenedor. Se utilizan dos divs para mostrar imágenes de dos períodos diferentes. A continuación, establezca el estilo de los dos contenedores, código:
#before {posición: absoluto; arriba: 0px; Izquierda: 0px; background-image: url (../ imágenes/24.jpg); Ancho: 940px; Altura: 529px; Background-Repeat: sin repetición; } #before {posición: Absolute; arriba: 0px; Izquierda: 0px; Border-Right: 3px Solid #F00; background-image: url (../ imágenes/23.jpg); Ancho: 433px; Altura: 529px; Background-Repeat: sin repetición; Máxido: 940px; }De esta manera, la imagen se mostrará en la web.
A continuación, logre el efecto de obturación del rodillo. Para implementar el obturador del rodillo, lo más importante es establecer el ancho de antes. ¿Cómo configurarlo? Es para obtener la posición del mouse. El código es el siguiente:
function rollImage (evt) {var x = evt.pagex; console.log (x); $ ("#antes"). CSS ("Ancho", x+"Px"); } /script>De esta manera, se realiza el efecto del obturador del rodillo. El código fuente es el siguiente:
style.css
. Altura: 529px; } #after {posición: absoluto; arriba: 0px; Izquierda: 0px; background-image: url (../ imágenes/24.jpg); Ancho: 940px; Altura: 529px; Background-Repeat: sin repetición; } #before {posición: Absolute; arriba: 0px; Izquierda: 0px; Border-Right: 3px Solid #F00; background-image: url (../ imágenes/23.jpg); Ancho: 433px; Altura: 529px; Background-Repeat: sin repetición; Máxido: 940px; }test.html
<html lang = "zh-cn" xmlns = "http://www.w3.org/1999/xhtml"> <bitle> <title> comparación antes y después de las áreas de terremoto de terremoto en Japón </title> <meta http-equiv = "contenido de contenido" http-oquiv = "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 <script type " RollImage (EVT) {<strong> var x = evt.pagex; $ ("#antes"). CSS ("Width", x+"Px"); </strong>} </script> </head> <body> <div onMouseMove = "rollImage (event)"> <div ID = "después"> </div> <divi = "antes"> </div> </body> </html>