H5页面（三）效果之实现图片360度旋转---------spritespin.js插件

添加小程序，兑换各种视频教程/数据资源。

1. 官网：http://spritespin.ginie.eu/；

SpriteSpin是一个jQuery插件，可将图像帧转换为动画。它需要一个图像阵列或一个精确的精灵片，并像翻转书一

样逐帧播放它们。此插件的目的是提供任何类型产品的360度视图。该插件的构建具有可扩展性，并允许Web开发

人员定制动画的行为和表示.

2. 下载引用：

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

方法2 ：

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

3. 具体步骤：

3.1 为SpriteSpin创建一个容器：<div id='mySpriteSpin'></div>；

3.2 初始化插件：

$("#mySpriteSpin").spritespin({

animate:false/true, //是否自动播放360度图片旋转

frame:0, //初始时显示第几张图，默认为0开始

frames:8, //总共有几张图

frameTime:30, //每次图片旋转更新的时间(毫秒)

loop:true, //是否循环播放

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

stopFrame：5, //当loop:false表示停在第5张图上

source: [ //保存所有图片路径的数组

"path/to/frame_001.jpg",

"path/to/frame_002.jpg",

"path/to/frame_003.jpg",

"path/to/frame_004.jpg"

onComplete:function(){ //回调，加载完spritespin并且第一次绘制操作完成时发生

}，

onDraw：function(){ //当所有更新完成并且可以绘制框架时发生

onFrame：function(){ //当帧号(即当前图片更换)更新时发生

}，

onFrameChanged：function(){ //在帧号更改时发生

OnInit:function(){ //在插件初始化后，但在加载源文件之前发生

onProgress:function(){ //在加载任何源文件并且进度已更改时发生

onLoad:function(){ //所有源文件都已加载且spritespin准备好更新和绘制时发生

width : 480,

height : 327

});

自定义spritespin函数：

SpriteSpin.extendApi({

myFunction: function(){

console.log('这是自定义的函数', this.data.frame);

} });

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

pine.currentFrame(); //表示当前图片的编号

}).spritespin("api")；

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

api.myFunction();

</script>

注意：在滑动图片360度旋转时，不能有其他div图层样式遮挡住spriteSpin插件的容器，

如果存在遮挡的div图层样式，可以为遮挡的div图层添加属性pionter-enents:none，阻止其默认事件。

H5页面（三）效果之实现图片360度旋转---------spritespin.js插件相关推荐

【精心挑选】10款基于 jQuery 的图片360度旋转插件
之前的文章向大家分享了实现网站功能的各种优秀的 jQuery 插件,今天这篇文章向大家推荐10款基于 jQuery 的图片360度旋转插件,同时还有非常详细的制作教程可以学习和参考.图片旋转展示是一种 ...
精心挑选10款基于 jQuery 的图片360度旋转插件
之前的文章向大家分享了实现网站功能的各种优秀的 jQuery 插件,今天这篇文章向大家推荐10款基于 jQuery 的图片360度旋转插件,同时还有非常详细的制作教程可以学习和参考.图片旋转展示是一种 ...
spritespin.js插件实现图片360度旋转
1. 官网:http://spritespin.ginie.eu/: SpriteSpin是一个jQuery插件,可将图像帧转换为动画.它需要一个图像阵列或一个精确的精灵片,并像翻转书一样逐帧播放它们 ...
JS图片360度全景预览插件
下载地址通过令人惊叹的360视角吸引您的客户,让您的产品充满震撼.JS Cloudimage 360 View 是一种简单的交互式资源,可用于提供产品的虚拟浏览. dd:
图片360度无死角自由旋转
前言图片360度任意旋转, 一.设计思路 1.确定中心和起始点:当鼠标点击旋转图标时,中心点为左边图片中心,起始点为旋转图标中心: 2.确定结束点:当鼠标移动时,鼠标的每一次变换都会更新结束点的坐标 ...
360度旋转图片小特效
现在,在这个网络发达的时代,一些电子商务公司,需要将自己线上的产品给买家或用户看,为了能让用户了解的更全面,那么把一个物件的产品要展示到方方面面,就要运用到360度旋转图片特效,因为上次有朋友叫我帮她 ...
通过CSS3实现：鼠标悬停图片360度旋转效果
效果很好玩,代码很简单: 效果: 鼠标放置在图片上:360度顺时针旋转鼠标离开图片:图片260度逆时针旋转只要将下面代码拷贝过去,并将图片改成你想要的就可以看到效果 <!doctype ht ...
js产品360度旋转预览图片插件
下载地址纯js实现的产品360度旋转预览图片插件.该js特效仅使用120行代码,即可实现通过滑块.或鼠标手动360度旋转图片,以及自动360度旋转图片的效果. dd:
图片可以360度旋转类似广告代码
图片可以360度旋转类似广告代码 <div style='height:60px; line-height:50px; text-align:center; color: #b2b2b2;'&g ...
html5图片自动翻转,纯js实现360度旋转预览图片特效
这是一款纯js实现360度旋转预览图片特效.该js特效仅使用120行代码,即可实现通过滑块.或鼠标手动360度旋转图片,以及自动360度旋转图片的效果. 使用方法 HTML结构 import Roll ...

H5页面（三）效果之实现图片360度旋转---------spritespin.js插件

添加小程序，兑换各种视频教程/数据资源。

H5页面（三）效果之实现图片360度旋转---------spritespin.js插件相关推荐

最新文章

热门文章