今日の人気記事

  1. select要素の複数選択フォームを実装「Multiple Select」
  2. 複数のポップアップを重ねて表示「dialog」

追尾型(オーバーレイ)広告を表示「Meerkat」

スポンサーリンク

簡単に追尾型の広告が表示できるjQueryプラグイン「Meerkat」の紹介です。

jQueryプラグイン「Meerkat」

ページをスクロールしても……スクロールしても……

追尾してくる広告……

非常にうっとうしい便利な機能が実装ができるjQueryプラグインです。

スポンサーリンク

さらにオプションを設定することでページの上下左右に配置を変更することができ、閉じるボタン・二度と表示させないようにする(Cookieで)こともできます。

ページ下部配置のソース(デモ1を掲載)とデモを作成しました。ご参考にどうぞ。

デモ1 デモ2

デモのソース(HTML + jQuery)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Meerkat Demo - レンタルサーバー比較のプサイ</title>
<link href="jquery.slider.css" rel="stylesheet" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="jquery.meerkat.1.3.js"></script>
<style type="text/css" media="screen">
.code {margin-top: 25px;}
.close-meerkat {
	position: absolute;
	display: block;
	height: 18px;
	width: 18px;
	background: url('images/close-x.png') no-repeat 0 0;
	cursor: pointer;
	text-indent: -9000px;
	z-index: 10;
}
.dont-show {
	position: absolute;
	display: block;
	height: 18px;
	width: 160px;
	cursor: pointer;
	z-index: 10;
	color: #EC7700;
}
a.dont-show:hover {color:#FFF;}
.adsense {z-index: 5;}
.meerkat {
	color: #FFF;
	display: none;
}
.pos-bot .adsense {
	width: 728px;
	height: 90px;
	position: absolute;
	left: 50%;
	margin-left: -364px;
}
.pos-bot .adsense {top: 20px;}
.pos-bot .close-meerkat {right: 10px; top: 20px;}
.pos-bot .dont-show {right: -10px; top: 100px;}
.pos-bot .dont-show {top: 100px;}
</style>
<script type="text/javascript">
$(function(){
	$('.meerkat').meerkat({
		background: 'url(\'images/meerkat-bot-bg.png\') repeat-x left top',
		height: '120px',
		width: '100%',
		position: 'bottom',
		close: '.close-meerkat',
		dontShowAgain: '.dont-show',
		animationIn: 'slide',
		animationSpeed: 500,
		removeCookie: '.reset'
	}).addClass('pos-bot');
});
</script>
</head>
<body>
<div style="height:2000px;">
<p>Meerkatのデモでーす。</p>
</div>
<div class="meerkat">
	<a href="#" class="close-meerkat">close</a>
	<a class="dont-show">二度と表示させない</a>
	<div class="adsense">
<a href="http://px.a8.net/svt/ejp?a8mat=25ITDK+D3MEI+CO4+65ME9" target="_blank">
<img border="0" width="728" height="90" alt="" src="http://www20.a8.net/svt/bgt?aid=130208312022&wid=004&eno=01&mid=s00000001642001034000&mc=1"></a>
<img border="0" width="1" height="1" src="http://www11.a8.net/0.gif?a8mat=25ITDK+D3MEI+CO4+65ME9" alt="">
</body>
</html>
スポンサーリンク

関連記事(一部広告含む)