前回も同様の記事を書いたんですが、正直問題だらけであまり使い物になりません。
もっとBingっぽい挙動に近づけないものか、と調べていたら、こちらのページでいい方法を見つけました。
PHP & JavaScript Roomさんのサイト
jQueryか～。protetypeはよく使うけど、jQueryは初めて。
とりあえずサイトに載っていたスクリプトを元に改造を施してみました。
手順
１．まずはjQueryをダウンロードします。（ダウンロードサイト）
２．今回はスクリプトを外部ファイルに記述します。fade.jsというファイルをUTF-8で作成し、そこに以下のスクリプトを記述します。（ダウンロード）
$(document).ready(function () {
//関数呼び出し
fade_init();
fade_marker();
fade_text();
//初期設定
function fade_init(){
fade = $('.fade_marker');
fade.fadeTo(300, 0.2);
}
//マーカーを表示
function fade_marker(){
$('.fade').hover(function() {
fade = $('.fade_marker', this);
if (fade.is(':animated')) {
fade.stop().fadeTo(300, 0.6);
} else {
fade.fadeTo(300, 0.6);
}
}, function () {
fade = $('.fade_marker', this);
if (fade.is(':animated')) {
fade.stop().fadeTo(300, 0.2);
} else {
fade.fadeTo(300, 0.2);
}
});
}
//テキストを表示
function fade_text(){
$('.fade_content').hover(function() {
fade_link = $('.fade_link', this);
if (fade_link.is(':animated')) {
fade_link.stop().fadeTo(300, 0.8);
} else {
fade_link.fadeTo(300, 0.8, function(){
$('.fade_text', this).css("display","block");
});
}
}, function () {
fade_link = $('.fade_link', this);
if (fade_link.is(':animated')) {
fade_link.stop().fadeTo(300, 0);
} else {
$('.fade_text', this).css("display","none");
fade_link.fadeOut(300);
}
});
}
});
jQueryでは
$(".クラス名")
でオブジェクトを取得できます。
ID名で取得する場合は
$("#ID名")
となります。
フェードについては以下の関数で行います。
- fadeTo(speed, opacity, [callback])
- fadeOut(speed, [callback])
フェードインの場合は「fadeIn(speed, [callback])」でも行えます。
しかしfadeToのほうが、最終的な不透明度を指定できるので、やや透明にしたい場合は「fadeTo」を利用してください。
３．１．でダウンロードした「jquery.js」ファイルと、２．で作った「fade.js」をheadタグで呼び出します。
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/fade.js"></script>
４．bodyタグ内にマーカーとテキストを以下のように記述します。
<div class='fade' style='top:20px; left:20px;'>
<div class='fade_padding'>
<div class='fade_content'>
<div class='fade_marker'><span> </span></div>
<div class='fade_text'>
<span>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト1</span>
</div>
<a class='fade_link' href='http://www.yahoo.co.jp'>
<span>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト1</span>
</a>
</div>
</div>
</div>
ここで必要なclass名は
- class='fade'
- class='fade_content'
- class='fade_marker'
- class='fade_link'
- class='fade_text'
の以上５つです。２．のスクリプトではこのclass名を元にデータを取得しています。
フェードエリアはposition:absolute;にするので「class='fade'」のタグはstyle記述にて位置を設定してください。
５．最後にスタイルを設定します。
<style>
/* 基本設定 */
body,div,pre,p,blockquote,
form,fieldset,input,textarea,select,option,
dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,
table,th,td,embed,object{
font-size:100%;
margin:0;
padding:0;
vertical-align:baseline;
line-height:1.0em;
font-weight:normal;
border:0;
}body{
background-color:#666666;
background-repeat:no-repeat;
position:relative;
}/* マーカー表示用エリア */
.fade {
width:240px;
height:240px;
position:absolute;
background-image:url(img/fade_bk.gif);
}.fade div.fade_padding{
padding:100px;
}/* マーカー */
.fade div.fade_marker {
display:none;
padding:1px;
background-color:#000000;
cursor:default;
}.fade div.fade_marker span{
display:block;
width:36px;
height:36px;
border:solid 1px #FFFFFF;
}/* テキストブロック */
.fade div.fade_text,
.fade a.fade_link{
display:none;
position:absolute;
padding:1px;
top:100px;
left:140px;
color:#FFFFFF;
font-size:14px;
line-height:1.5em;
}.fade a.fade_link{
background-color:#000000;
text-decoration: none;
cursor:pointer;
}.fade a.fade_link span,
.fade div.fade_text span{
display:block;
width:196px;
padding:5px;
border:solid 1px #FFFFFF;
}</style>
外部ファイルにする場合は、headタグで呼び出してください。
<link rel="stylesheet" href="css/style.css" type="text/css" />
なおスタイルに記述されている「background-image:url(img/fade_bk.gif);」の画像ですが、なぜかさくらインターネットだけposition:absoluteの設定にするとhoverによるフェードができなかったため苦肉の策で追加した透明gif画像です。 なくても正常に動作するようならばその記述は削除してもかまいません。
以上で完了です。
サンプル [新しいウィンドウで開く] （ダウンロード）
※サンプルでは４つのフェードマーカーを作っています。
前回の問題点であった、フェード中のhoverが対応できていない。同様に素早くマウスをhoverさせると表示がぶれる、などが一気に解決しました。