Symfoware

Symfowareについての考察blog

cssで画像の一部を切り抜き、jQueryで拡大・縮小できるようにする

タイトルに困ったのですが、やりたいことは

・画像の一部だけを表示したい。
・画像を拡大や縮小したい。
・ドラッグ&ドロップで表示している位置を変更したい。



画像の一部だけを表示したい



こちらを参考にさせていただきました。
CSSだけで画像をトリミングする方法3つとjQueryを使う方法1つ

imgタグの親要素に「overflow:hidden;」を指定すればOKです。


  1. <!-- 1.画像の一部だけを切り抜きたい -->
  2. <style type="text/css">
  3. .cut{
  4.     width:80%;
  5.     height:80%;
  6.     overflow:hidden;
  7. }
  8. </style>






画像を拡大・縮小したい



jQueryで画像の横幅を倍にしたり、1/2したりすればOK。
ただし、高さを指定してしまうと、自動縮尺してくれなくなるようです。


  1. // 2.zoom in、zoom outは横幅を倍にしたり、1/2したりする
  2. $('#zoom-in').on('click', function(){
  3.     $('#cut img').width($('#cut img').width() * 2);
  4. });
  5. $('#zoom-out').on('click', function(){
  6.     $('#cut img').width($('#cut img').width() / 2);
  7. });






ドラッグ&ドロップしたい



jQuery UIの力をかります。
ドラッグ&ドロップしたい要素に、「.draggable()」すればOK。


  1. // 3.ドラッグ&ドロップはjQuery UIの力を借りる
  2. $( '#cut img' ).draggable();






全容



上記のことを総合して、全体像はこんな感じになりました。


  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  4. <meta http-equiv="content-style-type" content="text/css" />
  5. <meta http-equiv="content-script-type" content="text/javascript" />
  6. <title>JavaScriptでnative2ascii</title>
  7. <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  8. <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
  9. <!-- 1.画像の一部だけを切り抜きたい -->
  10. <style type="text/css">
  11. .cut{
  12.     width:80%;
  13.     height:80%;
  14.     overflow:hidden;
  15. }
  16. </style>
  17. <script type="text/javascript">
  18. $(function() {
  19.     
  20.     var img$ = $( '#cut img' );
  21.     
  22.     // 適当に大きさの初期値と表示座標を決める
  23.     img$.width($('#cut').width());
  24.     img$.css('top', ($('#cut').height() - img$.height()) / 2 );
  25.     
  26.     // 2.zoom in、zoom outは横幅を倍にしたり、1/2したりする
  27.     $('#zoom-in').on('click', function(){
  28.         $('#cut img').width($('#cut img').width() * 2);
  29.     });
  30.     $('#zoom-out').on('click', function(){
  31.         $('#cut img').width($('#cut img').width() / 2);
  32.     });
  33.     
  34.     // 3.ドラッグ&ドロップはjQuery UIの力を借りる
  35.     $( '#cut img' ).draggable();
  36. });
  37. </script>
  38. </head>
  39. <body>
  40.     <h3>画像の切り抜きと拡大・縮小</h3>
  41.     <p class="cut" id="cut">
  42.         <img id="img" src="pic.jpg">
  43.     </p>
  44.     <button id="zoom-in">拡大</button><button id="zoom-out">縮小</button>
  45.     <br /><br/><br/>
  46.     <a href="index.html">サンプル一覧へ</a>
  47. </body>
  48. </html>







サンプル&デモ



サンプルはこちらにおいておきます。
http://symfo.web.fc2.com/js-sample/jq/sample4.html

画像はこちらの壁紙をお借りしました。
http://matome.naver.jp/odai/2130176743667455101/2130184812368446903


[広告 ] VPS
関連記事

テーマ:プログラミング - ジャンル:コンピュータ

  1. 2014/11/01(土) 15:15:11|
  2. 備忘録
  3. | トラックバック:0
  4. | コメント:0
  5. | 編集
<<FreeBSD + OpenCV 2.4.9 + py-opencvで顔認識 | ホーム | jQueryで処理完了時、画面上部にメッセージ(notification)を表示する>>

コメント

コメントの投稿


管理者にだけ表示を許可する

トラックバック

トラックバック URL
http://symfoware.blog68.fc2.com/tb.php/1519-72b1a531
この記事にトラックバックする(FC2ブログユーザー)