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 = "