jQuery
様々な処理を短く簡単に書ける
jQueryを読み込む
→ 新規ファイル(slidemoji.html)を開き<head>部分に記述
[html]
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js”></script>
[/html]
→ htmlに記述
[html] <script type=”text/javascript”>
$(document).ready(function(){
//マスオーバー時にキャンプション表示
$(‘.boxgrid.captionfull’).hover(function(){
$(“.cover”, this).stop().animate({top:’220px’},{queue:false,duration:160});
}, function() {
$(“.cover”, this).stop().animate({top:’350px’},{queue:false,duration:160});
});
//マウスオーバー時に残りを表示
$(‘.boxgrid.caption’).hover(function(){
$(“.cover”, this).stop().animate({top:’220px’},{queue:false,duration:160});
}, function() {
$(“.cover”, this).stop().animate({top:’265px’},{queue:false,duration:160});
});
//マスオーバー時に右にスライド
$(‘.boxgrid.slideright’).hover(function(){
$(“.cover”, this).stop().animate({left:’450px’},{queue:false,duration:300});
}, function() {
$(“.cover”, this).stop().animate({left:’0px’},{queue:false,duration:300});
});
//マスオーバー時に右下にスライド
$(‘.boxgrid.thecombo’).hover(function(){
$(“.cover”, this).stop().animate({top:’300px’, left:’450px’},{queue:false,duration:300});
}, function() {
$(“.cover”, this).stop().animate({top:’0px’, left:’0px’},{queue:false,duration:300});
});
//マスオーバー時に上にスライド
$(‘.boxgrid.slidedown’).hover(function(){
$(“.cover”, this).stop().animate({top:’-300px’},{queue:false,duration:300});
}, function() {
$(“.cover”, this).stop().animate({top:’0px’},{queue:false,duration:300});
});
//マスオーバー時に他の画像も表示
$(‘.boxgrid.peek’).hover(function(){
$(“.cover”, this).stop().animate({top:’90px’},{queue:false,duration:160});
}, function() {
$(“.cover”, this).stop().animate({top:’0px’},{queue:false,duration:160});
});
});
</script>[/html]
→ cssを読み込む[download id=”5″]
→ < body >部分に1枚画像を挿入
→ マウスオーバーで表示する文字を記入
→ 画像と文字の1セットをdivクラスboxgrid captionfullで囲う※やりたい効果により異なる
→ 文字部分をdivクラスcover boxcaption
→ ブラウザで確認