添加小程序，兌換各種視頻教程/數(shù)據(jù)資源。

1. 官網(wǎng)：http://spritespin.ginie.eu/；

SpriteSpin是一個jQuery插件，可將圖像幀轉(zhuǎn)換為動畫。它需要一個圖像陣列或一個精確的精靈片，并像翻轉(zhuǎn)書一

樣逐幀播放它們。此插件的目的是提供任何類型產(chǎn)品的360度視圖。該插件的構(gòu)建具有可擴展性，并允許Web開發(fā)

人員定制動畫的行為和表示.

2. 下載引用：

?? ? ? ?方法1? ：npm install spritespin； import?SpriteSpin from "spritespin" ;

? ? ? ? 方法2??：

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<script src='https://unpkg.com/spritespin@4.0.3/release/spritespin.js'></script>

??????? 方法3? ：?<script src="./spritespin.js"></script>

3. 具體步驟：

? ? 3.1??為SpriteSpin創(chuàng)建一個容器：<div id='mySpriteSpin'></div>；

??? 3.2?初始化插件：

<script >

????$("#mySpriteSpin").spritespin({

????? ? animate:false/true,? ? ? ? ? ? ? ? ? ? ? ??????//是否自動播放360度圖片旋轉(zhuǎn)

????? ? frame:0,? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ???//初始時顯示第幾張圖，默認(rèn)為0開始

????? ? frames:8,? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??? //總共有幾張圖

????????frameTime:30,? ? ? ? ? ? ? ? ? ? ? ? ? ??? ? ? //每次圖片旋轉(zhuǎn)更新的時間(毫秒)

????? ??loop:true,? ??? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? //是否循環(huán)播放

????????reverse:true,? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??? //正向360度還是反向360度播放

????????stopFrame：5,??? ? ? ? ? ? ? ? ? ? ? ? ??? //當(dāng)loop:false表示停在第5張圖上

????????source: [? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?//保存所有圖片路徑的數(shù)組

????????????????"path/to/frame_001.jpg",

????????????????"path/to/frame_002.jpg",

????????????????"path/to/frame_003.jpg",

????????????????"path/to/frame_004.jpg"

?????????],

????????onComplete:function(){? ? ? ? ???//回調(diào)，加載完spritespin并且第一次繪制操作完成時發(fā)生

????????}，

????????onDraw：function(){? ? ? ??? ?//當(dāng)所有更新完成并且可以繪制框架時發(fā)生

????? ? },

????????onFrame：function(){? ? ? ??//當(dāng)幀號(即當(dāng)前圖片更換)更新時發(fā)生

????????}，

????????onFrameChanged：function(){? ? ??//在幀號更改時發(fā)生

????????},

????????OnInit:function(){? ? ? ? ? ? ? ? ???//在插件初始化后，但在加載源文件之前發(fā)生

????????},

????????onProgress:function(){? ? ? ? ??//在加載任何源文件并且進(jìn)度已更改時發(fā)生

????????},

????? ? onLoad:function(){? ? ? ? ? ? ?//所有源文件都已加載且spritespin準(zhǔn)備好更新和繪制時發(fā)生

????????},

????????width : 480,

????????height : 327

?});

自定義spritespin函數(shù)：

SpriteSpin.extendApi({

????myFunction: function(){

????????console.log('這是自定義的函數(shù)', this.data.frame);

????} });

var pine=$("#mySpriteSpin").spritespin({?

? ? pine.currentFrame();? ? ??//表示當(dāng)前圖片的編號

}).spritespin("api")；?

var api = $("#mySpriteSpin").spritespin("api");

api.myFunction();

</script>

注意：在滑動圖片360度旋轉(zhuǎn)時，不能有其他div圖層樣式遮擋住spriteSpin插件的容器，

如果存在遮擋的div圖層樣式，可以為遮擋的div圖層添加屬性pionter-enents:none，阻止其默認(rèn)事件。

?

?

?

?

?

總結(jié)

以上是生活随笔為你收集整理的H5页面（三）效果之实现图片360度旋转---------spritespin.js插件的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。