色々なエフェクトがある画像ズームJavaScript「Cloud Zoom」

画像をズームさせることで、小さなスペースで詳細まで見せることが可能です。
今回紹介するProfessor Cloudは軽量かつ簡単にズームをさせられます。
色々なエフェクトがある画像ズームJavaScript「Cloud Zoom」サンプル

使用方法
Professor Cloudからファイルをダウンロードします。
またjQueryも忘れず用意しましょう。
<link href="cloud-zoom.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="cloud-zoom.1.0.1.js"></script>

上記を記述したら画像を記述していきます。
まずは、小さい画像とズーム表示させる大きい画像を用意しましょう。
<a href="大きい画像パス" class="cloud-zoom"
title="キャプション"
rel="position:'bottom', //表示位置(left', 'right', 'top', 'bottom', 'inside'または特定のID)
smoothMove:2", //ズーム時の移動距離
tint: '#CCC', //ハイライト表示(#は表示色)
tintOpacity:0.7 , //ハイライトの透明度
>
<img src="小さい画像パス" />
</a>

色々なエフェクトがある画像ズームJavaScript「Cloud Zoom」サンプル

sponsors

「色々なエフェクトがある画像ズームJavaScript「Cloud Zoom」」をシェアする

記事作成:
記事URL:

TOP > > > 色々なエフェクトがある画像ズームJavaScript「Cloud Zoom」