人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

【ビフォー・アフター画像切り替えのWebページの作成法】
-- 回答受付中にもコメント欄を開いています --

下記例のようなビフォー・アフターのWebページを作成する方法を教えてください。

特徴は、アフター画面の上でマウスを左から右へ移動させると、移動したところ
までが順次連続的にビフォー画面切り替わる。

ビフォー・アフター画像切り替えの例:
http://www.guardian.co.uk/world/interactive/2011/mar/14/japan-earthquake-before-and-after


●質問者: mkonomi
●カテゴリ:ウェブ制作
✍キーワード:Web コメント欄 マウス 作成 画像
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● deflation
●35ポイント

Flashを使って、上のレイヤの画像を横方向に動かせば良いのです。

マウスの動きと背景画像」が参考になるでしょう。

◎質問者からの返答

さっそくの回答ありがとうございました。

これから勉強させていただきます。

確認ですが、「横方向に動かせば」と書かれておられるのは、

上のレイヤの画像全体をそのまま横へスライドするのではありませんよね。


2 ● Cherenkov
●50ポイント ベストアンサー

質問のリンク先はFlashですとしか答えられないので、以下のようなJavaScriptを使ったサイトのサンプルコードを書きました。

それぞれソースコードを読めば仕組みはわかりますね。position:relativeな要素の下にposition:absoluteな要素を配置して重ねるのがミソだと思います。


DEMO:

http://jsfiddle.net/vzLT3/


<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を使ったコードの作成ありがとうございました。

これから勉強させていただきます。

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ