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

Question

tsuntsuku

90

90もっと見る

100pt

コンピュータウェブ制作

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

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

回答の条件

1人2回まで

登録：2009/08/19 17:24:37
終了：2009/08/19 19:59:06

※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

GEN111 2009/08/19 21:45:53

適当に作ってみた。

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>
tsuntsuku 2009/12/02 16:09:19

GEN111さん
今さら気づきました…
いつも（といっても超久々ですが…）ありがとうございます！

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

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

リクエスト送信済

回答リクエストを送信したユーザーはいません

y-kawaz · Accepted Answer · 2009-08-19T17:53:31+09:00

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

<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;">ホバー１</div>
<div class="hover" style="left:250px;">ホバー２</div>
<div class="hover" style="left:450px;">ホバー３</div>
</body>

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

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

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

ベストアンサー

y-kawaz14222262009/08/19 17:53:31

コメント（2件)

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