-- 回答受付中にもコメント欄を開いています --
下記例のようなビフォー・アフターのWebページを作成する方法を教えてください。
特徴は、アフター画面の上でマウスを左から右へ移動させると、移動したところ
までが順次連続的にビフォー画面切り替わる。
ビフォー・アフター画像切り替えの例：
http://www.guardian.co.uk/world/interactive/2011/mar/14/japan-earthquake-before-and-after
No.2
1504
493
50pt
質問のリンク先はFlashですとしか答えられないので、以下のようなJavaScriptを使ったサイトのサンプルコードを書きました。
それぞれソースコードを読めば仕組みはわかりますね。position:relativeな要素の下にposition:absoluteな要素を配置して重ねるのがミソだと思います。
DEMO:
<html> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> <script> $(function() { $('.beforeafter').mousemove(function(event){ var offset = $(this).offset().left; if ((event.clientX - offset) < ($(this).find(".after").width() -50) && (event.clientX - offset) > 50) { $(this).find(".before").width(event.clientX - offset); } }); }); </script> </head> <body> <div class="beforeafter" style="width: 940px; height: 529px; position:relative;"> <div class="after" style="background: url('http://www.abc.net.au/news/events/japan-quake-2011/images/beforeafter/sendai-airport-2.jpg') repeat scroll 0% 0% transparent; width: 940px; height: 529px; position:absolute;"></div> <div class="before" style="background: url('http://www.abc.net.au/news/events/japan-quake-2011/images/beforeafter/sendai-airport-1.jpg') repeat scroll 0% 0% transparent; width: 392.5px; height: 529px; position:absolute;"></div> </div> </body> </html>
No.1
1036126
さっそくの回答ありがとうございました。
これから勉強させていただきます。
確認ですが、「横方向に動かせば」と書かれておられるのは、
上のレイヤの画像全体をそのまま横へスライドするのではありませんよね。
No.2
1504493
ここでベストアンサー
50pt
質問のリンク先はFlashですとしか答えられないので、以下のようなJavaScriptを使ったサイトのサンプルコードを書きました。
それぞれソースコードを読めば仕組みはわかりますね。position:relativeな要素の下にposition:absoluteな要素を配置して重ねるのがミソだと思います。
DEMO:
<html> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> <script> $(function() { $('.beforeafter').mousemove(function(event){ var offset = $(this).offset().left; if ((event.clientX - offset) < ($(this).find(".after").width() -50) && (event.clientX - offset) > 50) { $(this).find(".before").width(event.clientX - offset); } }); }); </script> </head> <body> <div class="beforeafter" style="width: 940px; height: 529px; position:relative;"> <div class="after" style="background: url('http://www.abc.net.au/news/events/japan-quake-2011/images/beforeafter/sendai-airport-2.jpg') repeat scroll 0% 0% transparent; width: 940px; height: 529px; position:absolute;"></div> <div class="before" style="background: url('http://www.abc.net.au/news/events/japan-quake-2011/images/beforeafter/sendai-airport-1.jpg') repeat scroll 0% 0% transparent; width: 392.5px; height: 529px; position:absolute;"></div> </div> </body> </html>
新たな、ビフォー・アフター画像のページのご紹介ありがとうございました。
興味深く閲覧させていただきました。
また、JavaScriptを使ったコードの作成ありがとうございました。
これから勉強させていただきます。
Cherenkov
2011/03/15 23:37:19
296
177
mkonomi
2
新たな、ビフォー・アフター画像のページのご紹介ありがとうございました。
興味深く閲覧させていただきました。
また、JavaScriptを使ったコードの作成ありがとうございました。
これから勉強させていただきます。