Entries

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

-件のコメント

コメントの投稿

新規
投稿した内容は管理者にだけ閲覧出来ます

-件のトラックバック

トラックバックURL
http://jacketj.blog45.fc2.com/tb.php/1095-39253b9c
この記事に対してトラックバックを送信する(FC2ブログユーザー)

onmouseoverでジャケット画像を徐々に拡大するJavascript

注意:画像の上にカーソルを置くと、画像が勝手に拡大します。








ライオン

ちょっと画像実験中。

onmouseoverで拡大します。とりあえず最大200%の制限つき。

setTimeoutとclearTimeoutだけで色々遊べます。

複数でもいけるかな?



星間飛行ダイアモンド クレバス/射手座☆午後九時Don't be late


なんかランカとシェリルの競争みたいでイヤだな。



にしても、縮小がない・・・・。

用途が決まったら作ってみるかな?



Firefoxではまだ動きません。zoomはIE仕様だからなぁ。
width、heightでいけるのかな?少数使えるかどうか怪しいし、少数使えないと比率が怪しいけど・・・。


ソース
<script type="text/javascript">
<!--
var id;
function s(o) {
var p = Number(o.style.zoom.replace("%", ""));
if (p <= 200) {
p = (p + 1);
}
p += "%";
o.style.zoom=p;
id = window.setTimeout(function b(){s(o);}, 20);
}
function e(o) {
window.clearTimeout(id);
}
//-->
</script>

設定方法

<img src="http://ecx.images-amazon.com/images/I/51UWgwcppgL._SL160_.jpg" onmouseover="s(this);" onmouseout="e(this);" style="zoom:100%;">



ちょっと手を加えれば、style="zoom:100%;"の指定は不要です。
スポンサーサイト

0件のコメント

コメントの投稿

新規
投稿した内容は管理者にだけ閲覧出来ます

0件のトラックバック

トラックバックURL
http://jacketj.blog45.fc2.com/tb.php/1095-39253b9c
この記事に対してトラックバックを送信する(FC2ブログユーザー)

Appendix

ジャケット画像を探す!

最近の記事

Amazon検索

プロフィール

Author:jacketer
中の人は完全な佳奈様病です

ブログ内検索

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。