今日の人気記事

まだデータがありません。

指定した要素を拡大する「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>

jsファイルのダウンロード、オプション詳細はこちらからどうぞ。

スポンサーリンク

関連記事（一部広告含む）