olidStateEveryday - Ajax,javascript,UIサンプルとチュートリアル -

Ajax,Javascript、コンテンツを効果的に表現するスクリプトサンプル設置方法

  1. Home>
  2. コンテンツ表示>
  3. フローティングボックス>
  4. 追いかけてくるフローティングボックス

フローティングボックスSMART STICKY FLOATING BOX

追いかけてくるフローティングボックス

スポンサードリンク
  • del.icio.us に登録
  • ライブドアクリップに追加
  • Google Bookmarks に追加
  • はてなブックマークに追加
  • Yahoo!ブックマークに登録
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<title>floating menu test - test #2</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<script type="text/javascript" src="jquery-1.3.2.min.js"></script>

	<style type="text/css">
		body{ margin:0; padding:0; }
		.content{ padding:10px; width:900px;height:1000px; margin:0 auto; background-color:#f1f1f1; position:relative; }
			.content .text{ height:1000px; background-color:#ddd; margin-left:250px; text-align:center; color:#333; font-size:2em; }
			.content #menu{ left:10px; width:240px; height:450px; background:green; text-align:center; color:#fff; font-size:2em; }
	</style>
	
</head>

	<body>
		<div class="content">
			<div id="menu">menu</div>
			<div class="text">Some text</div>
		</div>

		<script type="text/javascript" src="smartsticky.js"></script>
	</body>
</html>

サンプルはこちら

時々見かける、ページスクロールについてくるボックスを作成するスクリプトです。
jquery を読み込ませて、設定を書き込むだけで使用できるようになるので手早く検討できます。
配布もとのサンプルでは、設定をファイルとして配布していないので直接書き込んでいるのですが、
単独のjsファイルにまとめてしまった方がすっきりしてよいかもしれません。

１．ダウンロード＆セッティング

まず、jquery-1.3.2.min.js をダウンロードしてください。
次に、設定を記述したファイルをjsファイルとしてまとめたので、smartsticky.js とネームつけてダウンロードし保存してください。
ダウンロードできたら、適当な場所にアップロードしておきます。

２．<head>設定

アップしたスクリプトを読み込ませます。

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>

ここでは jQuery のみ読み込ませておきます。

３．HTMLマークアップ

まず smartsticky.js を</body>前あたりに記述して読み込ませてください。

<script type="text/javascript" src="smartsticky.js"></script>

このファイルを開いてい見ると分かりますが、ページの最後に以下の記述があります。

$('#menu').stickyfloat({ duration: 400 });

この #menu の箇所が追いかけてくるボックスに付けるID名で、duration の数値がそのスピードです。
数値が大きければ大きいほど遅くなるので、好みで調節して下さい。

４．ボックスの位置をCSSで設定する

ボックスの初期位置はCSSにて設定します。
この追いかけてくるボックスは、position:absolute によってレイアウトされているので、
#menuに、top や left で配置したい場所を指定します。

関連スクリプト

感想

スクリプトの使用について

SolidStateEverydayでご紹介しているAjax,Javascript等のスクリプトをご利用になる場合は、必ず製作元のサイトで使用ライセンスを確認してください。ご利用は自己責任でお願い致します。

結局、エックスサーバーなんですよね。