Mereka yang telah menggunakan ArcGIS harus memiliki memori yang mendalam tentang efek rana roller di Arcmap. Mereka ingin memindahkannya ke sistem webgis mereka. Dengan ide yang sama, saya juga telah melakukan penelitian tentang efek rana roller yang mempesona ini. Itu keluar dan melaporkan hasilnya kepada semua orang.
Melihat efek ini, apakah Anda memindahkan cewek itu? Hehe, jangan khawatir, dengarkan aku perlahan.
Pertama, wadah. Dua div digunakan untuk menampilkan gambar dari dua periode yang berbeda. Selanjutnya, atur gaya dua kontainer, kode:
#before {position: absolute; Atas: 0px; Kiri: 0px; latar belakang-gambar: url (../ gambar/24.jpg); Lebar: 940px; Tinggi: 529px; Latar belakang-repeat: No-Repeat; } #before {position: absolute; Atas: 0px; Kiri: 0px; Border-Right: 3px Solid #F00; latar belakang-gambar: url (../ gambar/23.jpg); Lebar: 433px; Tinggi: 529px; Latar belakang-repeat: No-Repeat; Max-Width: 940px; }Dengan cara ini, gambar akan ditampilkan di web.
Selanjutnya, capai efek rana roller. Untuk mengimplementasikan shutter roller, yang paling penting adalah mengatur lebar sebelumnya. Bagaimana cara mengaturnya? Ini untuk mendapatkan posisi mouse. Kodenya adalah sebagai berikut:
fungsi rollimage (evt) {var x = evt.pagex; console.log (x); $ ("#Sebelum"). CSS ("lebar", x+"px"); } /skrip>Dengan cara ini, efek rana roller direalisasikan. Kode sumber adalah sebagai berikut:
style.css
.beforeAfter {width: 940px; Tinggi: 529px; } #after {position: absolute; Atas: 0px; Kiri: 0px; latar belakang-gambar: url (../ gambar/24.jpg); Lebar: 940px; Tinggi: 529px; Latar belakang-repeat: No-Repeat; } #before {position: absolute; Atas: 0px; Kiri: 0px; Border-Right: 3px Solid #F00; latar belakang-gambar: url (../ gambar/23.jpg); Lebar: 433px; Tinggi: 529px; Latar belakang-repeat: No-Repeat; Max-Width: 940px; }test.html
<html lang = "zh-cn" xmlns = "http://www.w3.org/1999/xhtml"> <head> <Title> perbandingan sebelum dan sesudah area gempa bumi di Jepang </title> <meta http-equiv = "content-type" Content = "TEKS/TEKS/TEKST/TEKS/TEKS/TEKS/TEKS/TEKS/TEKS/TEKS/TEKS/TEKS/TEKS/TEKS/TEKS/TEKS/TEKS/TEKS/TEKS/TEKS/TEKS/TEKSTP; TEKP/TEKSTP; 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; $ ("#Sebelum"). CSS ("Lebar", x+"px"); </strong>} </skrip