面白そうなjQueryのプラグインが紹介されていました。
シンプルな画像ズームjQueryプラグイン「ZoomIt」 – PHPSPT開発日誌さん
画像を部分的に大きく見せたい時になど使えそうです。
マウスを画像の上に持ってくればその部分が、画像の大きさをMaxとして拡大されます。
デモ
設定
ダウンロード
git：
loganstellway/ZoomIt
サンプルコード
ダウンロードしたファイルや、説明書きなどからサンプルを作ってみました。
簡単に設置できて良い感じです
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /> <title>ZoomIt</title> <style> img { height: auto; max-width: 100%; } </style> <link rel="stylesheet" href="dist/styles/zoomit.css" /> </head> <body> <section> <h2>Example</h2> <!-- ZoomIt Example --> <div class="zoomit-wrapper"> <img id="zoomit-target" src="assets/images/koala-large.jpg" data-zoomed="assets/images/koala-original.jpg" alt="Fluffy cute Koala" /> </div> マウスオンでズーム。 </section> <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <script src="dist/scripts/jquery.zoomit.min.js"></script> <script type="text/javascript"> (function(code){ code(document, window, jQuery); }(function(document, window, $){ $(function(){ $('#zoomit-target').zoomIt(); }); })); </script> </body> </html> |
こういうブログもありました。
- YouTubeの動画をスライド表示させるプラグイン
- Nivo Sliderのスライドショー（jQueryプラグイン）
- Tumblrのリブログした画像をスライドショーの背景画像として設置 jQueryで
- Parallaxをやってみましたよ、jQueryを使って
- 横からぴょ～んと出てくる動き、CSS3のみで。
人気のあるブログ：
- 新しいgemのアップデート方法（rubygems-update）
- Coda2でscssを使うときのお供にcompassをどうぞ。
- bashでUTF-8に設定して日本語表示したり使ったり。Emacsでも。
- NginxをSSL付きで動かすために設定したこと
- Macでフォルダを結合したいとき
