jQuery Circlr plug-in_jquery に基づく商品画像の 360 度回転-jsチュートリアル-php.cn

jQuery Circlr plug-in_jquery に基づく商品画像の 360 度回転

WBOY

リリース： 2016-05-16 15:38:38

オリジナル

1633 人が閲覧しました

Circlr は、商品画像を 360 度回転して表示できる jQuery プラグインです。 Circlr は、特定の角度で定期的に撮影された製品写真を使用して、マウスドラッグ、マウスホイール、モバイルタッチを使用して写真をフレームごとに回転させる効果を作成します。以前の Rollerblade に比べて、アニメーションがよりスムーズになり、制御が容易になり、商品の表示に非常に適したプラグインです。

その機能は次のとおりです:

水平または垂直回転をサポートします。

モバイルタッチイベントをサポートします。

スクロールイベントをサポートします。

画像のプリロード処理。

写真を逆回転したり、ループしたりすることができます。

jQ のクールなサンプルチュートリアル: jQuery 製品画像 360 度回転 Circlr

コアファイルの紹介

<script src='js/jquery.js'></script>  
<script src='js/circlr.js'></script>

ログイン後にコピー

HTML を作成するには、画像を配置するための DIV コンテナを作成するだけで済みます。もちろん、エクスペリエンスを向上させるためにロードされた DIV を追加することもできます。

<div id="circlr">
 <img data-src="picture/00.jpg">
 <img data-src="picture/01.jpg">
 <img data-src="picture/02.jpg">
 <img data-src="picture/03.jpg">
 <img data-src="picture/04.jpg">
 <img data-src="picture/05.jpg">
 <img data-src="picture/06.jpg">
 <img data-src="picture/07.jpg">
 <img data-src="picture/08.jpg">
 <img data-src="picture/09.jpg">
 <img data-src="picture/10.jpg">
 <img data-src="picture/11.jpg">
 <img data-src="picture/12.jpg">
 <img data-src="picture/13.jpg">
 <img data-src="picture/14.jpg">
 <img data-src="picture/15.jpg">
 <div id="loader"></div>
</div>

ログイン後にコピー

JS を記述してプラグインを初期化します

var crl = circlr(element, options); //调用方法
//element：放置图片的容器元素的ID。
//options：参数对象。 
//实例
 var crl = circlr('circlr', {
  scroll : true,
  loader : 'loader'
 });

ログイン後にコピー

パラメータ

mouse: マウスを使用して画像を回転するかどうか。デフォルト値は true です。

スクロール: スクロールによって画像を回転するかどうか。デフォルト値は false です。

vertical: マウスを垂直方向に移動したときに画像を回転するかどうか、デフォルト値は false です。

reverse: 方向を反転するかどうか。デフォルト値は false です。

cycle: 画像を循環させるかどうか。デフォルト値は true です。

start: アニメーションフレームを開始します。デフォルト値は 0 です。

speed: circlr.turn(i) によるアニメーションフレームの切り替え速度。デフォルト値は 50 ミリ秒です。

autoplay: 画像の 360 度回転と再生を自動的に実行するかどうか。デフォルト値は false です。

playSpeed: アニメーションシーケンスの再生速度。デフォルト値は 100 ミリ秒です。

loader: プリロードされた DOM 要素の ID。