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

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

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


●質問者: tsuntsuku
●カテゴリ:コンピュータ ウェブ制作
✍キーワード:JavaScript イルカ ウインドウ スクリプト ポイント
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● y-kawaz
●100ポイント ベストアンサー

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

<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ライブラリを使っています。

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

◎質問者からの返答

ありがとうございます!

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

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

関連質問


●質問をもっと探す●



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