まだデータがありません。
画面いっぱいの大きさで画像を比較「Comparison」
当ページのリンクには広告が含まれています。
スポンサーリンク
画面いっぱいの大きさで画像を比較するプラグイン「Comparison」を紹介します。
jQueryプラグイン「Comparison」
このプラグインを使えば画像を指定するだけで、画面の横幅をいっぱい使って画像を比較することができます。また、画像をクリックすると画像の大きさをスライドできるのも便利ですね。
複数の画像を並べて表示したい場合にも重宝するかもしれません。
スポンサーリンク
以下のデモにアクセスし、画像をクリックしマウスカーソルを左右に動かしてみてください。
ソース（HTML + jQuery）
<!DOCTYPE html> <html> <head> <meta charset='utf-8'> <meta name="description" content="Comparisonのデモでーす。"> <title>Comparison - jQuery Plugin Demo</title> <link href="css/style.css" rel="stylesheet" type="text/css"> <link href="css/jquery.comparison.css" rel="stylesheet" type="text/css"> </head> <body> <h1>Comparison のデモでーす。</h1> <p>画像をクリックし、マウスカーソルを左右に動かしてみてください。</p> <div class="jquery-comparison gigantic locked" data-snap="200"> <img src="images/blue.png" class="before"> <img src="images/green.png" class="after"> </div> <div class="jquery-comparison gigantic locked" data-snap="200"> <img src="images/orange.png" class="before"> <img src="images/red.png" class="after"> </div> <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <script src="js/jquery.comparison.js"></script> </body> </html>
スポンサーリンク