まだデータがありません。
追尾型（オーバーレイ）広告を表示「Meerkat」
当ページのリンクには広告が含まれています。
スポンサーリンク
簡単に追尾型の広告が表示できるjQueryプラグイン「Meerkat」の紹介です。
jQueryプラグイン「Meerkat」
ページをスクロールしても……スクロールしても……
追尾してくる広告……
非常にうっとうしい便利な機能が実装ができるjQueryプラグインです。
スポンサーリンク
さらにオプションを設定することでページの上下左右に配置を変更することができ、閉じるボタン・二度と表示させないようにする（Cookieで）こともできます。
ページ下部配置のソース（デモ１を掲載）とデモを作成しました。ご参考にどうぞ。
デモのソース（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">
<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>
スポンサーリンク