是一個基于jquery的一個插件庫

我用的是vue2 所以要先安裝jq

npm install jquery --save

vue項目使用jq需要在vue.config文件中配置webpack

const webpack = require('webpack') chainWebpack: config => {config.plugin('provide').use(webpack.ProvidePlugin, [{$:'jquery',jquery: 'jquery',jQuery: 'jquery','window.jQuery': 'jquery'}])},

然后在項目中引入jq

?使用的插件是(spritespin官網)

安裝插件

?安裝完成 也是在項目中引入

?在創建3d模型前我們需要為 Spritespin準備一個DOM 容器。

<div class="spritespin" style="cursor: pointer"></div>

?在通過Spritespin寫好的方法創建3d模型

<script type='text/javascript'> $(".mySpriteSpin").spritespin({// path to the source images.source: ["path/to/frame_001.jpg","path/to/frame_002.jpg","path/to/frame_003.jpg","path/to/frame_004.jpg","path/to/frame_005.jpg","path/to/frame_006.jpg","path/to/frame_007.jpg","path/to/frame_008.jpg","path/to/frame_009.jpg","path/to/frame_010.jpg",],width : 480, // width in pixels of the window/frameheight : 327, // height in pixels of the window/frame }); </script>

效果展示?

?

?

?

詳情可去Spritespin官網進行查看 配置項等等。

總結

以上是生活随笔為你收集整理的电商商品3d展示---插件spritespin的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。