Diejenigen, die ArcGIs verwendet haben, müssen eine tiefe Erinnerung an den Effekt eines Rollenläders in ArcMap haben. Sie wollen es in ihr WebGIS -System verschieben. Mit der gleichen Idee habe ich auch einige Nachforschungen über diesen schillernden Roller -Shutter -Effekt durchgeführt. Es ist draußen und meldet die Ergebnisse allen.
Haben Sie das Küken bewegt? Hehe, mach dir keine Sorgen, hör mir langsam zu.
Erstens Container. Zwei Divs werden verwendet, um Bilder aus zwei verschiedenen Perioden anzuzeigen. Setzen Sie als nächstes den Stil der beiden Container, Code:
#before {Position: absolut; Oben: 0px; links: 0px; Hintergrund-Image: URL (../ Bilder/24.JPG); Breite: 940px; Höhe: 529px; Hintergrundrepeat: No-Repeat; } #before {Position: absolut; Oben: 0px; links: 0px; Grenzrechte: 3px fest #f00; Hintergrund-Image: URL (../ Bilder/23.JPG); Breite: 433px; Höhe: 529px; Hintergrundrepeat: No-Repeat; Max-Breite: 940px; }Auf diese Weise wird das Bild im Web angezeigt.
Erreichen Sie als Nächstes den Roller -Shutter -Effekt. Um den Roller -Verschluss zu implementieren, ist das Wichtigste, die Breite von zuvor zu setzen. Wie setze ich es ein? Es soll die Position der Maus bekommen. Der Code ist wie folgt:
Funktion RollImage (evt) {var x = evt.pagex; console.log (x); $ ("#vor"). CSS ("Breite", x+"px"); } /script>Auf diese Weise wird der Effekt des Rollenläders realisiert. Der Quellcode lautet wie folgt:
style.css
. Höhe: 529px; } #after {Position: absolut; Oben: 0px; links: 0px; Hintergrund-Image: URL (../ Bilder/24.JPG); Breite: 940px; Höhe: 529px; Hintergrundrepeat: No-Repeat; } #before {Position: absolut; Oben: 0px; links: 0px; Grenzrechte: 3px fest #f00; Hintergrund-Image: URL (../ Bilder/23.JPG); Breite: 433px; Höhe: 529px; Hintergrundrepeat: No-Repeat; Max-Breite: 940px; }test.html
<html lang = "zh-cn" xmlns = "http://www.w3.org/1999/xhtml"> <titels> Vergleich vor und nach dem Erdbecher in Japan. http-äquiv = "content-Sprache" content = "zh-cn"> <link href = "css/roll.css" type = "text/csS" rel = "stylesheet"> <script src = "../ Jquery-1.8.3.js" Typ = "Text/Javascript" charset "utf-8"> </scrpty> </scrpty/javascript "charset" utf-8 "> </scrpty> </scrpty/javaScript" utf-8 "> <- RollImage (evt) {<strong> var x = evt.pagex; $ ("#vor").