今日の人気記事

  1. レスポンシブなパンくずナビを作成する「rCrumbs」
  2. テーブルをレスポンシブ対応に「rt Responsive Tables」
  3. 背景画像や色をランダムに変更「RandomBackground」
  4. 英数字がパラパラめくれるボードを実装「Flight Board」

指定した要素を拡大する「Zoomooz」

スポンサーリンク

指定した要素を拡大するjQueryプラグイン「Zoomooz」を紹介します。

jQueryプラグイン「Zoomooz」

jQueryプラグイン「Zoomooz」は、クリックすることで指定した要素を拡大したり、元に戻したりしてくれるプラグインです。

拡大するときはゆるりと動きながら拡大するので目を惹きつけることまちがいなし! 多様なオプションもあるので、いろいろためしてみると楽しいですよ。

スポンサーリンク

指定した要素(div)をクリックすると……でっかくなります。もう一度クリックすると元のサイズに戻ります。ソースをみてもらうとわかるのですが、本当に簡単に実装できます。

「Zoomooz」のデモ

デモのソース(HTML + jQuery)


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="Zoomooz のデモでーす。">
<title>Zoomooz - jQuery Plugin Demo</title>
<link href="css/style.css" type="text/css" rel="stylesheet"/>
<script src="http://code.jquery.com/jquery-2.0.0.js"></script>
<script src="js/jquery.zoomooz.js"></script>
</head>
<body>
<div class="zoomingDemo">
  <div class="zoomTarget" data-targetsize="1.0" data-closeclick="true">クリックすると……でっかくなるよ〜!</div>
  <div class="zoomTarget" data-targetsize="1.0" data-closeclick="true">もう一度クリックするともとに戻るよ〜</div>
  <div class="clearer"></div>
</div>

<footer style="margin-top:20px">
<a href="https://webkaru.net/jquery-plugin/zoomooz/">「jQueryプラグインまとめ」に戻る</a>
</footer>
</body>
</html>
スポンサーリンク

関連記事(一部広告含む)