Facebookの投稿
ウェブ制作技術 SNS・ブログ
おすすめウェブサイト
ウェブ制作のご注文は全国対応

北海道 青森 岩手 秋田 宮城 山形 福島 東京 神奈川 埼玉県 千葉 茨城 群馬 栃木 愛知 静岡 三重 岐阜 新潟 長野 山梨 石川 富山 福井 大阪 京都 奈良 兵庫 滋賀 和歌山 岡山 広島 鳥取 山口 島根 愛媛 徳島 高知 香川 福岡 佐賀 長崎 大分 熊本 宮崎 鹿児島 沖縄

下部までスクロールすると右下にBOXが開くJavaScript

01.01.14 18:14 | コメント(0)

右下の枠が開くJavaScript

ブログサイトや広告関係のウェブサイトを見ていて右下に現れるBOXを
見たことある方もいると思います。

スクロールで下まで行ったらBOXの窓が開き、SNS関係のボタンや広告が表示されたりと
利用用途は様々ですが、今回はその機能の設定方法をご紹介いたします。

まずこのツールの機能がどうやって動いているかと言いますと、JavaScriptで動いております。

サンプルページ

下部までスクロールすると右下にBOXが開く

 1. 「jQuery」プラグインをダウンロード
 2. 「html」「css」「JavaScript」ファイルの作成
 3. ヘッダーの記載

サンプルページはこちら

「jQuery」プラグインをダウンロード

まずは下記のサイトから「jQuery」ファイルをダウンロードします。

▼jQueryサイト
jQuery.jsダウンロード

「html」「css」「JavaScript」ファイルの作成

次に「下部までスクロールすると右下にBOXが開くJavaScript」用のソースコードを作成します。

【htmlファイルに記述】

こちらが開きます。

※この中にBOX内の内容を記載。

【cssファイルに記述】
#slide {
	position: fixed;
	width: 180px;
	height: 30px;
	bottom: 0;
	right: 0;
	color: #666;
	background: #fff;
	border-left: solid 1px #cfcfcf;
	border-top: solid 1px #cfcfcf;
	box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.4);
	filter:alpha(opacity=90);
	-moz-opacity: 0.9;
	opacity: 0.9;
}
#slide_inner {
	float:left;
	padding:60px 20px 10px 20px;
}
#slide-in {
	padding: 5px 10px;
}
#slide a {
	text-decoration: none;
	cursor: pointer;
}
#slide h3 {
	font-size:12px;
	margin-bottom: 5px;
}
#slide #open-btn {
	position: absolute;
	right: 5px;
	top: 5px;
	width: 20px;
	height: 20px;
	cursor: pointer;
	background: url(/sample/005/img/close-btn.gif);
}

【JavaScriptファイルに記述】
$(function() {
	var slide = $('#slide');
	var contents = $('#slide-contents');
	//開くボタン
	var openBtn = $('#open-btn img');
	var btnOpenFlag = false;
	var openFlag = false;
	var panelSwitch = function() {
		//閉じる
		if (openFlag == true ) {
			slide.stop().animate({'width' : '180px','height' : '30px'}, 500); 
			openBtn.show();		//開くボタンにする
		}
		//開く
		else if (openFlag == false) {
			slide.stop().animate({'width' : '550px','height' : '250px'}, 500); 
			openBtn.hide();		//閉じるボタンにする
		}
	};
	//開くボタンクリックしたら
	$('#open-btn').click(function(){
		panelSwitch();
		openFlag = !openFlag;
		btnOpenFlag = true;
	});
	//画面下位置を取得
	var bottomPos = $(document).height() - $(window).height() - 500;
	$(window).scroll(function () {
		if (!btnOpenFlag) {
			if ($(this).scrollTop() >= bottomPos) {
				if (openFlag == false) {
					panelSwitch();
					openFlag = true;
				}
			} else {
				if (openFlag) {
					panelSwitch();
					openFlag = false;
				}
			}
		}
	});
});

ヘッダーの記載

ダウンロードファイルをアップロードし、ヘッダーへ「JavaScript」ファイルへの読み込みコードを記載しましょう。

【headに記述】


WEBデザイナー







以上で設定完了です。

利用サイト

インターナショナルスクール 利用サイトはこちら
カテゴリ:WEB屋になる為の知識と技術, 使えるjQueryとJavaScript
  • このエントリーをはてなブックマークに追加
  • Facebookでコメントする

    コメントする

    おすすめの記事

    PAGE TOP