是一個(gè)基于jquery的一個(gè)插件庫

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

npm install jquery --save

vue項(xiàng)目使用jq需要在vue.config文件中配置webpack

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

然后在項(xiàng)目中引入jq

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

安裝插件

?安裝完成 也是在項(xiàng)目中引入

?在創(chuàng)建3d模型前我們需要為 Spritespin準(zhǔn)備一個(gè)DOM 容器。

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

?在通過Spritespin寫好的方法創(chuàng)建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官網(wǎng)進(jìn)行查看 配置項(xiàng)等等。

總結(jié)

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

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