実行結果
設置サンプルのソース
<!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="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>設置サンプル</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<!-- JS -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="/content/lib/jquery/jquery.ahover.js"></script>
<script type="text/javascript" src="/content/lib/jquery/jquery.dimensions-1.2.js"></script>
<script type="text/javascript">
$(function(){
$('ul.menu li').ahover({toggleEffect: 'width'});
$('ul.cards li').ahover({moveSpeed: 100, hoverEffect: function() {
$(this)
.css({opacity: 0.99})
.animate({opacity: 0.5}, 750)
.animate({opacity: 0.99}, 750)
.dequeue();
$(this).queue(arguments.callee);
}});
$('ul.letters li').ahover({toggleEffect: 'height', moveSpeed: 75, toggleSpeed: 250});
});
</script>
<!-- CSS -->
<style type="text/css">
ul {
clear:both;
list-style-type:none;
margin:20px; padding:0;
position:relative;
overflow:hidden;
}
li {
list-style-type:none;
margin:0; padding:0;
position:relative;
z-index:200;
float:left;
}
ul.menu {
}
ul.menu li {
font-size:1.1em;
clear:left;
color:#222;
}
ul.menu li:hover {
color:#134;
}
div.ahover {
position:absolute;
}
ul.menu div.ahover {
background:#adf;
border:2px solid #cef;
-webkit-border-radius:7px;
-moz-border-radius:7px;
}
ul.cards {
}
ul.cards li {
color:#eee;
background:#222;
text-align:center;
margin:10px;
width:10em; height:6em;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border:3px solid #111;
}
ul.cards li:hover {
color:#f43;
}
ul.cards li span {
display:block;
margin:0; padding:0;
font-size:3em;
}
ul.cards div.ahover {
background:red;
padding:3px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border:1px solid red;
}
ul.letters {
font-size:2em;
font-weight:bold;
}
ul.letters li {
color:#abb;
padding:5px 10px;
line-height:1;
}
ul.letters li:hover {
color:#fff;
}
ul.letters div.ahover {
-webkit-border-radius:5px;
-moz-border-radius:5px;
background:#ff6699;
}
</style>
<link rel="stylesheet" type="text/css" href="/common/css/example.css"></head>
<body id='example3' class='example'><div class="ads" style="margin:32px auto;text-align:center;"></div><h1 class='h'><a href='/'>PHP & JavaScript Room</a> :: 設置サンプル</h1>
<h3 class='h'>実行結果</h3>
<div id="wrap">
<h1>設置サンプル</h1>
<p>参照： <a href='http://code.google.com/p/jquery-ahover/wiki/Documentation'>Animated Hover Plugin for jQuery</a></p>
<!-- CODE -->
<ul class="menu">
<li>PHP</li>
<li>JavaScript/DOM</li>
<li>Ajax</li>
<li>音声・動画配信</li>
<li>Web関連特集</li>
</ul>
<ul class="cards">
<li>クローバー<span>♣</span></li>
<li>ダイヤ<span>♦</span></li>
<li>ハート<span>♥</span></li>
<li>スペード<span>♠</span></li>
</ul>
<ul class="letters">
<li>P</li><li>H</li><li>P</li><li>&</li><li>J</li><li>a</li><li>v</li><li>a</li><li>S</li><li>c</li><li>r</li><li>i</li><li>p</li><li>t</li><li>R</li><li>o</li><li>o</li><li>m</li>
</ul>
<!-- / CODE -->
</div>
</body>
</html>