ผู้ที่ใช้ ArcGIS จะต้องมีความทรงจำลึก ๆ ของผลกระทบของชัตเตอร์ลูกกลิ้งใน Arcmap พวกเขาต้องการย้ายไปยังระบบ WebGIS ของพวกเขา ด้วยความคิดเดียวกันฉันได้ทำการวิจัยเกี่ยวกับเอฟเฟกต์ชัตเตอร์โรลเลอร์ที่พราวนี้ มันออกมาและรายงานผลลัพธ์ให้กับทุกคน
เห็นเอฟเฟกต์นี้คุณย้ายลูกเจี๊ยบหรือไม่? ฮิฮิไม่ต้องกังวลฟังฉันช้าๆ
อันดับแรกคอนเทนเนอร์ สอง divs ใช้เพื่อแสดงภาพจากสองช่วงเวลาที่แตกต่างกัน จากนั้นตั้งค่าสไตล์ของสองคอนเทนเนอร์รหัส:
#Before {ตำแหน่ง: สัมบูรณ์; ด้านบน: 0px; ซ้าย: 0px; พื้นหลัง-ภาพ: url (../ images/24.jpg); ความกว้าง: 940px; ความสูง: 529px; พื้นหลังซ้ำ: ไม่ทำซ้ำ; } #Before {ตำแหน่ง: สัมบูรณ์; ด้านบน: 0px; ซ้าย: 0px; ชายแดนขวา: 3PX Solid #F00; พื้นหลัง-ภาพ: url (../ images/23.jpg); ความกว้าง: 433px; ความสูง: 529px; พื้นหลังซ้ำ: ไม่ทำซ้ำ; ความกว้างสูงสุด: 940px; -ด้วยวิธีนี้ภาพจะปรากฏบนเว็บ
ถัดไปบรรลุเอฟเฟกต์ชัตเตอร์ลูกกลิ้ง ในการใช้ชัตเตอร์โรลเลอร์สิ่งที่สำคัญที่สุดคือการตั้งค่าความกว้างก่อน จะตั้งค่าได้อย่างไร? มันคือการได้รับตำแหน่งของเมาส์ รหัสมีดังนี้:
ฟังก์ชัน RollImage (EVT) {var x = evt.pagex; console.log (x); $ ("#before"). css ("ความกว้าง", x+"px"); } /สคริปต์>ด้วยวิธีนี้ผลกระทบของชัตเตอร์ลูกกลิ้งจะเกิดขึ้นได้ ซอร์สโค้ดมีดังนี้:
style.css
.Beforefter {width: 940px; ความสูง: 529px; } #after {ตำแหน่ง: สัมบูรณ์; ด้านบน: 0px; ซ้าย: 0px; พื้นหลัง-ภาพ: url (../ images/24.jpg); ความกว้าง: 940px; ความสูง: 529px; พื้นหลังซ้ำ: ไม่ทำซ้ำ; } #Before {ตำแหน่ง: สัมบูรณ์; ด้านบน: 0px; ซ้าย: 0px; ชายแดนขวา: 3PX Solid #F00; พื้นหลัง-ภาพ: url (../ images/23.jpg); ความกว้าง: 433px; ความสูง: 529px; พื้นหลังซ้ำ: ไม่ทำซ้ำ; ความกว้างสูงสุด: 940px; -test.html
<html lang = "zh-cn" xmlns = "http://www.w3.org/1999/xhtml"> <head> <title> การเปรียบเทียบก่อนและหลังพื้นที่ที่เกิดจากแผ่นดินไหว http-equiv = "content-language" content = "zh-cn"> <link href = "css/roll.css" type = "text/css" rel = "stylesheet"> <script src = "../ jQuery-1.8.3 RollImage (EVT) {<strong> var x = evt.pagex; $ ("#before"). css ("ความกว้าง", x+"px"); </strong>} </script> </head> <body> <div onmousemove = "rolmage (เหตุการณ์)"> <div id = "หลังจาก"> </div>