UNIRRY

WEBデザインとホロスコープと宇宙のブログ

オンマウスしたら画像が全面に乗っかってくるjsをつくる

cappp

マウスオーバーのパターン2つめです。透明アニメーションのやつを前回書いたので、今度はこのサイトでも使用している、オンマウスしたら画像がのっかってくるパターンのやつです。

js部分

$("#list li").hover(function(){
        $(this).children().append("<span id='overlay'><img src='__上から乗っける画像パス__" + num + ".gif'></span>");
        $(this).find("span").animate( { opacity: 0.7 }, 300 );
        return false;
}, function(){
        $(this).find("span").animate( { opacity: 0 }, 300).remove();
        return false;
});

html部分

<ul id="list">
<li>
<a href="#" >
<img src="__普通に表示してるリンク用画像パス__">
</a>
</li>
</ul>

css

ul#list li {
position: relative;
float: left;
width: 230px;
height: 200px;
}
ul#list li span {
position: absolute;
top: 0;
left: 0;
width: 230px;
height: 200px;
}

これでオンマウスしたら、①span要素が追加されてフェードイン、②マウスをはずすとspan要素が消える、っていう挙動になります。

最近みるのだと、オンマウスされるとリンク先の簡易化した情報だとか、更新日付けだとかが表示されるっていうのがあると思うのですが、もともとdivを用意しておいて、それのopacityを0にしておいて、オンマウスしたら透明度を変えてみせているのかなーとか思います。上のspanと同じくaタグの中にdivを用意しとく感じですね。そのパターンだとこんなんかもです。

js部分

$("#list li").hover(function(){
        $(this).find("div").animate( { opacity: 0.7 }, 300 );
        return false;
}, function(){
        $(this).find("div").animate( { opacity: 0 }, 300 );
        return false;
});

html部分

<ul id="list">
<li>
<a href="#" >
<img src="__普通に表示してるリンク用画像パス__">
<div>2013/08/17 ぷえっぷえ〜のリンク</div>
</a>
</li>
</ul>

css

ul#list li {
position: relative;
float: left;
width: 230px;
height: 200px;
}
ul#list li div {
position: absolute;
top: 0;
left: 0;
width: 230px;
height: 200px;
background: #669900;
opacity: 0;
}

aタグのなかのdiv要素は、cssでopacity0にしておけばそんな挙動になるんじゃん、じゃんと思います。


horoscope

“sozatu” animation!! >>    animation1   |   animation2   |   animation3