ArcGISを使用した人は、ARCMAPでローラーシャッターの効果を深く記憶する必要があります。彼らはそれを彼らのWebGisシステムに移動したいと思っています。同じアイデアで、私はこの見事なローラーシャッター効果についてもいくつかの研究をしました。それは外に出て、結果をすべての人に報告しています。
この効果を見て、ひよこを動かしましたか？ hehe、心配しないで、ゆっくりと聞いてください。
まず、コンテナ。 2つのDIVを使用して、2つの異なる期間の画像を表示します。次に、2つのコンテナのスタイル、コードを設定します。
#before {position：absolute;上：0px;左：0px;背景イメージ：url（../ images/24.jpg）;幅：940px;高さ：529px;バックグラウンドリピート：ノーリピート。 } #before {position：absolute;上：0px;左：0px;国境右：3PXソリッド＃F00;背景イメージ：url（../ images/23.jpg）;幅：433px;高さ：529px;バックグラウンドリピート：ノーリピート。最大幅：940px; }このようにして、画像はWebに表示されます。
次に、ローラーシャッター効果を実現します。ローラーシャッターを実装するには、最も重要なことは、以前の幅を設定することです。それを設定する方法は？マウスの位置を取得することです。コードは次のとおりです。
関数Rollimage（evt）{var x = evt.pagex; console.log（x）; $（ "＃before"）。css（ "width"、x+"px"）; } /script>このようにして、ローラーシャッターの効果が実現されます。ソースコードは次のとおりです。
style.css
.beforefter {width：940px;高さ：529px; } #after {position：absolute;上：0px;左：0px;背景イメージ：url（../ images/24.jpg）;幅：940px;高さ：529px;バックグラウンドリピート：ノーリピート。 } #before {position：absolute;上：0px;左：0px;国境右：3PXソリッド＃F00;背景イメージ：url（../ images/23.jpg）;幅：433px;高さ：529px;バックグラウンドリピート：ノーリピート。最大幅：940px; }test.html
<html lang = "zh-cn" xmlns = "http://www.w3.org/1999/xhtml"> <head> <title>日本の地震に苦しむ地域の前後の比較</title> <meta http-equiv = "content-type" content = "/html; 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 =" utf-8 "> javasst =" 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 = "