【JAVASCRIPT】ホバーウインドウと呼ばれているものを同一ページに複数設置したいのですがどうもうまくいきません。どのように修正すれば複数設置できるでしょうか?イルカ・高ポイント?差し上げます。


このスクリプトを使っています。
http://homepage2.nifty.com/y1955/page029.html

回答の条件
  • 1人2回まで
  • 登録:2009/08/19 17:24:37
  • 終了:2009/08/19 19:59:06

ベストアンサー

id:y-kawaz No.1

y-kawaz回答回数1420ベストアンサー獲得回数2252009/08/19 17:53:31

ポイント100pt

求める物とは違うかも知れませんが、ベタで自分で書くよりもライブラリを利用した方が簡単だと思います。

<html> 
<head> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $('.hover')
    .animate({top: '200px'}, 500)
    .animate({top: '-=20px'}, 50)
    .animate({top: '+=20px'}, 50)
    .animate({top: '-=20px'}, 50)
    .animate({top: '+=20px'}, 50)
    ;
});
</script>
<style type="text/css">
.hover {
  position: absolute;
  background-color: pink;
  width: 100px;
  height: 100px;
  top: -100px;
}
</style>
<body>
<div class="hover" style="left:50px;">ホバー1</div>
<div class="hover" style="left:250px;">ホバー2</div>
<div class="hover" style="left:450px;">ホバー3</div>
</body>

このサンプルでは jQuery という最近流行のJavascriptライブラリを使っています。

ライブラリについての詳細を知りたい場合は検索すれば解説やサンプルがいくらでも出てきますので。詳細説明は省きます。

id:tsuntsuku

ありがとうございます!

これ、落ちきる時間が全て同じですがホバー1、ホバー2、ホバー3を時間差で落とすことって可能でしょうか?

解決しました!ありがとうございました。

2009/08/19 19:57:06
  • id:GEN111
    適当に作ってみた。

    hoverwindow.js
    ////////////////////////////////////////////////////////////
    // 移動関数作成
    function getHWMoveFunc(hw, y, t, sp) {
    return function() {
    y += sp ;
    sp += 4 ;
    hw.style.top = y + 'px' ;

    if (y > t && sp > 0) y = t, sp *= -0.3 ;

    if (Math.abs(sp) > 2.8 || Math.abs(y - t) > 1) setTimeout(getHWMoveFunc(hw, y, t, sp), 50) ;
    else hw.style.top = t ;
    }
    }

    ////////////////////////////////////////////////////////////
    // ホバーウィンドウ作成
    function createHoverWindow(src, tx, ty, dl) {
    var newElm = document.createElement('div') ;
    newElm.innerHTML = src ;
    with (newElm.style) {
    position = 'absolute' ;
    left = tx + 'px' ;
    }

    document.body.appendChild(newElm) ;
    newElm.style.top = (-newElm.offsetHeight) + 'px' ;

    setTimeout(getHWMoveFunc(newElm, -newElm.offsetHeight, ty, 0), dl) ;
    }


    呼び出し例
    <html>
    <head>
    <style type="text/css">
    .hover {
    width : 300px ;
    height : 200px ;
    }
    </style>

    <script type="text/javascript" src="./hoverwindow.js"></script>
    <script type="text/javascript">
    onload = function() {
    // createHoverWindow(中身, X座標, Y座標, 待ち時間)
    createHoverWindow('<div class="hover" style="background:lime">ひとつめ</div>', 10, 200, 0) ;
    createHoverWindow('<div class="hover" style="background:yellow">ふたつめ</div>', 200, 300, 500) ;
    createHoverWindow('<div class="hover" style="background:pink">みっつめ</div>', 400, 250, 2000) ;
    }
    </script>
    </head>

    <body>
    <h1>ほばーうぃんどう</h1>
    </body>
    </html>
  • id:tsuntsuku
    GEN111さん
    今さら気づきました…
    いつも(といっても超久々ですが…)ありがとうございます!

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません