你的位置:首页 > 网页设计

[网页设计]html5人物图片360度立体旋转


体验效果:http://hovertree.com/texiao/html5/10.htm

 

模特

下载:http://hovertree.com/hvtart/bjae/t16oddyt.htm

 

代码如下:

<!DOCTYPE html><html><head><meta charset="utf-8"><title>Full 360 degree View - HoverTree</title><style>.hvtholder {margin: 0px auto;width: 789px;text-align: center;}a {color: blue;}</style><script type="text/javascript" src="http://hovertree.com/ziyuan/jquery/jquery-1.11.3.min.js"></script><script>var ctx = null; // global variable 2d contextvar frame = 1; // 23var width = 0;var height = 0;var started = false;var images = new Array();var startedX = -1;$(function () {var canvas = document.getElementById("hov"+"ertree_canvas");canvas.width = 440;// window.innerWidth;canvas.height = 691;//window.innerHeight;width = canvas.width;height = canvas.height;var bar = document.getElementById('loadHove'+'rTreeBar');for (var i = 1; i < 24; i++) {bar.value = i;if (i < 10) {images[i] = new Image();images[i].src = "10/hovertree0" + i + ".jpg";}else {images[i] = new Image();images[i].src = "10/hovert"+"ree" + i + ".jpg";}}ctx = canvas.getContext("2d");// mouse eventcanvas.addEventListener("mousedown", doMouseDown, false);canvas.addEventListener('mousemove', doMouseMove, false);canvas.addEventListener('mouseup', doMouseUp, false);// loaded();// frame = 1frame = 1;images[frame].onload = function () {redraw();bar.style.display = 'none';}$("#goHovertr"+"ee").on("click", function () { gohovertree();})})function doMouseDown(event) {var x = event.pageX;var y = event.pageY;var canvas = event.target;var loc = getPointOnCanvas(canvas, x, y);console.log("mouse down at point( x:" + loc.x + ", y:" + loc.y + ")");startedX = loc.x;started = true;}function doMouseMove(event) {var x = event.pageX;var y = event.pageY;var canvas = event.target;var loc = getPointOnCanvas(canvas, x, y);if (started) {var count = Math.floor(Math.abs((startedX - loc.x)/30));var frameIndex = Math.floor((startedX - loc.x)/30);while(count > 0){console.log("frameIndex = " + frameIndex);count--;if(frameIndex > 0){frameIndex--;frame++;} else if(frameIndex < 0){frameIndex++;frame--;}else if(frameIndex == 0){break;}if(frame >= 24){frame = 1;}if(frame <= 0){frame = 23;}redraw();}}}function doMouseUp(event) {console.log("mouse up now");if (started) {doMouseMove(event);startedX = -1;started = false;}}function getPointOnCanvas(canvas, x, y) {var bbox = canvas.getBoundingClientRect();return { x: x - bbox.left * (canvas.width / bbox.width),y: y - bbox.top * (canvas.height / bbox.height)};}function gohovertree() {setTimeout( update, 1000/8);}function redraw(){// var imageObj = document.createElement("img");// var imageObj = new Image();var imageObj = images[frame];ctx.clearRect(0, 0, width, height)ctx.drawImage(imageObj, 0, 0, width, height);}function update() {redraw();frame++;if (frame >= 23) frame = 1;setTimeout( update, 1000/8);}</script></head><body><div class="hvtholder"><h3>360度旋转产品展示</h3><a href="http://hovertree.com">首页</a> <a href="http://hovertree.com/texiao/">特效</a> <a href="http://hovertree.com/hvtart/bjae/49kk0ib8.htm">原文</a><br />点击下面按钮旋转<br /><button id="goHovertree">点击旋转</button><br /></div><div style="width:640px;margin:0 auto;"><progress id="loadHoverTreeBar" value="0" max="23"></progress><canvas id="hovertree_canvas">您的浏览器不支持HTML5,使用支持HTTML5的浏览器,何问起,hovertree.com</canvas></div></body></html>

更多: http://www.cnblogs.com/roucheng/p/texiao.html