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 ...