很多购物网站现在都支持360实物全景图像,可以360度任意选择查看样品,这样
对购买者来说是一个很好的消费体验,网上有很多这样的插件都是基于JQuery实现的
有收费的也有免费的,其实很好用的一个叫3deye.js的插件。该插件支持桌面与移动终
端iOS与Android,
所以先说一下它的360度全景图的原理
1. 首先需要对实物拍照,间隔是每张照片旋转15度,所以需要23张照片。
2. 照片准备好了以后,尽量选择JPG格式,裁剪到适当大小。
3. JAVASCRIPT中预加载所有照片,可以配合进度条显示加载精度
4. 创建/获取Canvas对象,加上鼠标监听事件,当鼠标左右移动时候,适度的绘制不
同帧。大致的原理就是这样,简单吧!
实现代码:
要用html和css3,关键是css3