360度3D 旋轉外掛程式

2022-02-16 02:01:51 字數 1707 閱讀 5467

circlr外掛程式是一款基於jquery的可以對進行360度全方位旋轉展示的外掛程式。circlr通過按一定角度規律拍攝的產品,製作出可以使用滑鼠拖動、滑鼠滾輪和移動觸控來進行逐幀旋轉的效果。比先前的rollerblade,動畫順暢,也更易於控制,非常適合於商品的展示。

1. 支援水平或垂直方向旋轉。

2. 支援移動觸控事件。

3. 支援滾動事件。

4. 預載入處理。

5. 可以反向和迴圈旋轉。

使用方法:

1. 引用js檔案包

2.書寫結構:
...  //  這裡放入所需即可, 太多可用js動態新增

注意, 是 自定義屬性data-src裡面寫路徑 2.loader是 載入項

太多了可以用js動態新增

3. 書寫css
#circlr 

#circlr #loader

4.呼叫檔案物件

引數引數名

說明mouse

是否通過滑鼠進行旋轉,預設值為true。

scroll

是否通過scroll進行旋轉,預設值為false。

vertical

是否在垂直方向上移動滑鼠時旋轉,預設值為false。

reverse

是否反轉方向,預設值為false。

cycle

是否迴圈旋轉,預設值為true。

start

開始動畫幀,預設值為0。

speed

動畫幀通過circlr.turn(i)切換的速度,預設值為50毫秒。

autoplay

playspeed

loader

預載入dom元素的id。

ready

載入完成後的**函式。

change

動畫幀改編之後的**函式(以當前幀和總幀數為引數)。

方法方法名

說明crl.el

返回物件的dom元素節點。

crl.length

返回物件的總的動畫幀數。

crl.turn(i)

動畫旋轉到第i幀。

crl.go(i)

動畫跳轉到第i幀。

crl.play()

crl.stop()

crl.hide()

隱藏物件的dom元素節點。

crl.show()

顯示物件的dom元素節點。

crl.set(options)

在外掛程式初始化之後改變物件的引數:vertical reverse cycle speed playspeed

碼雲3d旋轉car

微雲3d旋轉car

基於jquery circlr外掛程式實現360度3d旋轉 商品展示案例

基於jquery circlr外掛程式實現產品360度旋轉

3D旋轉的時鐘

var hour new date gethours if hour 11 varmins new date getminutes var sec newdate getseconds 秒針,每週走60個單位 varunitsec 2 math.pi 60 分鐘,每週走60 60個單位 varuni...

iOS實現3D旋轉

最近看到了乙個3d旋轉的動畫,就想著自己去實現以下。那麼,接下來就通過這邊文章記錄以下學習過程,慢慢深入了解以下3d旋轉。一 如何旋轉 每個view都在系統的座標系中,就手機螢幕來說,左上角為 0 0 向右橫向的為x軸正方向,向下縱向的為y軸正方向,垂直於手機螢幕的方向既z軸方向。所以z軸的旋轉屬於...

CSS3動畫 3D旋轉

學了c3之後,簡單做了乙個3d旋轉的小demo.個人親猜測相容chrome firefox opera safari,沒有考慮ie。如果下面 有問題,可以在我的github檢視源 可以檢視網頁效果demo位址。如下 ccs3animation 3drotatetitle charset utf 8 ...