体验效果：

代码如下：

Full 360 degree View - HoverTree .hvtholder { margin width text-align a { color; ; ; Array(); ; $(function () { ); canvas.width canvas.width; height = canvas.height; ); ) { bar.value = i; ) { images[i] = new Image(); images[i].src ; } else { images[i] = new Image(); images[i].src ; } } ctx ); ); canvas.addEventListener(); canvas.addEventListener(); ; images[frame].onload = function () { redraw(); bar.style.display ; } $( () { gohovertree();}) }) function doMouseDown(event) { event.pageX; event.pageY; event.target; getPointOnCanvas(canvas, x, y); console.log(); startedX = loc.x; started = true; } function doMouseMove(event) { event.pageX; event.pageY; event.target; getPointOnCanvas(canvas, x, y); if (started) { ) { console.log( frameIndex); count--; ) { frameIndex--; frame++; } ) { frameIndex++; frame--; } ) { break; } ) { frame = 1; } ) { frame = 23; } redraw(); } } } function doMouseUp(event) { console.log(); if (started) { doMouseMove(event); startedX ; started = false; } } function getPointOnCanvas(canvas, x, y) { canvas.getBoundingClientRect(); bbox.width), y: y bbox.height) }; } function gohovertree() { setTimeout( update, } function redraw() { // var imageObj = document.createElement("img"); // images[frame]; ctx.clearRect(, width, height) ctx.drawImage(imageObj, , width, height); } function update() { redraw(); frame++; ; setTimeout( update, } 360度旋转产品展示首页特效原文点击下面按钮旋转点击旋转您的浏览器不支持HTML5，使用支持HTTML5的浏览器，何问起，hovertree.com

更多：