jQueryとCSSを使って、画像の一部を切り取り、表示する

一枚の大きな画像を用意し、jQueryとCSSの組み合わせで画像の一部分だけを表示したい。

また、ボタンを押すと切り抜く位置を変更して、あたかも画像が切り替わっているようにしたい。

・・・ということがやりたいわけです。





画面での説明



AからEまで、縦一列に記載された画像がひとつあります。
その一部、「A」と記載された領域だけ切り出しています。

48_001.png


「>」ボタンを押すと、「A」の下にある「B」に切り替わります。

48_002.png


「<」ボタンを押すと、「A」に戻ります。


サンプルソースは以下のとおり。


  1. <html>
  2. <head>
  3.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  4.     <title>画像の表示位置変更サンプル</title>
  5. <style type="text/css">
  6. <!--
  7. .crop{
  8.     float:left;
  9.     overflow:hidden; /* これが重要 */
  10.     position:relative; /* これが重要 */
  11.     border:0px solid #000000;
  12.     width:120px;
  13.     height:153px;
  14. }
  15. .crop img{
  16.     position:absolute; /* 絶対配置で位置コントロール */
  17.     top:0px;
  18.     left:0px;
  19. }
  20. -->
  21. </style>
  22.     <script type="text/javascript" src="./js/jquery-1.7.1.min.js"></script>
  23.     <script type="text/javascript">
  24.     $(document).ready(function() {
  25.         
  26.         var index = 0;
  27.         
  28.         var moveImage = function(){
  29.             $('.crop img').css('top', (-151 * index) + 'px');
  30.         };
  31.         
  32.         $('#prev').click(function(){
  33.             if (index <= 0) {
  34.                 return;
  35.             }
  36.             
  37.             index--;
  38.             moveImage();
  39.             
  40.         });
  41.         
  42.         $('#next').click(function(){
  43.             if (4 <= index) {
  44.                 return;
  45.             }
  46.             
  47.             index++;
  48.             moveImage();
  49.         });
  50.     });
  51.     </script>
  52. </head>
  53. <body>
  54.     <h3>画像の表示位置変更サンプル</h3>
  55.     <table border="0">
  56.         <tr><td>元画像</td><td>表示位置変更</td><td>表示切替</td></tr>
  57.         <tr>
  58.             <td><img src="images/move_sample.png"></td>
  59.             <td valign="top"><span class="crop"><img src="images/move_sample.png"></td>
  60.             <td valign="top"><input id="prev" type="button" value="<"><input id="next" type="button" value=">"></td>
  61.         </tr>
  62.     </table>
  63.     <br />
  64.     <a href="index.html">戻る</a>
  65. </body>
  66. </html>




また、以下のURLに動作するサンプルを置いておきます。

http://symfo.web.fc2.com/js-sample/gradients/sample7.html







参考URL



CSS 画像の一部を使う3つの方法
http://redline.hippy.jp/lab/css/css_3_1.php

関連記事

コメント

非公開コメント

プロフィール

Author:symfo
blog形式だと探しにくいので、まとめサイト作成中です。
Symfoware まとめ

PR




検索フォーム

月別アーカイブ