体验效果：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 context

var frame = 1; // 23

var 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 event

canvas.addEventListener("mousedown", doMouseDown, false);

canvas.addEventListener('mousemove', doMouseMove, false);

canvas.addEventListener('mouseup', doMouseUp, false);

// loaded();

// frame = 1

frame = 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

html5人物图片360度立体旋转的更多相关文章

  1. HTML实现图片360度循环旋转

    <style> .header{ -webkit-animation:rotateImg 5s linear infinite;<!--修改旋转周期--> border: 1p ...

  2. 通过CSS3实现：鼠标悬停图片360度旋转效果

    效果很好玩,代码很简单: 效果: 鼠标放置在图片上:360度顺时针旋转 鼠标离开图片:图片260度逆时针旋转 只要将下面代码拷贝过去,并将图片改成你想要的就可以看到效果 <!doctype ht ...

  3. 360度3D 旋转插件

    Circlr插件是一款基于jQuery的可以对图片进行360度全方位旋转展示的插件.Circlr通过按一定角度规律拍摄的产品图片,制作出可以使用鼠标拖动.鼠标滚轮和移动触摸来进行图片逐帧旋转的效果.比 ...

  4. 原生Js封装的产品图片360度展示

    挺简单的一段程序,但是效果不错: 1.把需要展示的36张图片先预加载到浏览器缓存里 2.给展示图片的div添加方法 3.通过鼠标左右移动的像素转换图片 在线效果预览:http://jsfiddle.n ...

  5. HTML5 Canvas实现360度全景图

    原文:http://blog.csdn.net/jia20003/article/details/17172571 很多购物网站现在都支持360实物全景图像,可以360度任意选择查看样品,这样 对购买 ...

  6. html5 图片360旋转

    test.html <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  7. C# 图片旋转360度程序

    这几天开发一个程序,需要将一个图片旋转360度然后每一个角度保存下来.刚开始本来想着是让美工弄的,但是让一个美工手动转360度,她会喷你一脸. using System; using System.C ...

  8. 安卓端360度全景图的html5实现

    这里是一款旅游相关的安卓应用,其中虚拟旅游的功能采用html5的360度全景图技术实现,使用户能够身临其境的感受旅游景点的风光. 此处引入了ddpanorama插件,它的原理是在canvas上绘制全景 ...

  9. Swift--使图片360° 周期旋转

    UIImageView+Extension.swift import UIKit extension UIImageView { // 360度旋转图片 func rotate360Degree() ...

随机推荐

  1. 用etckeeper来解救运维工程师

    对于运维工程师来讲,etc环境是一个痛点,各种配置,各种修改,某些软件的配置关联因素过多的话,那就更加痛苦了,改完发现不对再想改回去都千难万难, 现在有一个好的解决方案,那就是用etckeeper,绝 ...

  2. 自定义圆环progressbar

    RoundProgressBar.java /** * RoundProgressBar.java [v1.0.0] * classes: com.example.audiorecordingtest ...

  3. 教你在Excel里做GA的水平百分比图的详细步骤（图文教程）-成为excel大师（1）

    GA报表除了默认的表格方式显示数据外,还支持饼图,水平百分比图,数据透视图等展现方式,其中水平百分比图在可视化看流量时最为方便,就像这样: 那么当我们要在Excel里做类似的效果应该怎么做呢?尤其是数 ...

  4. Linux设备驱动剖析之Input（三）

    /* get current state of buttons */ ; i < pdata->nbuttons; i++) gpio_keys_report_event(&dda ...

  5. WindowsStore页面导航

    第一个页面:前台 <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}"> &l ...

  6. JavaScript封装Ajax（类JQuery中$.ajax()方法）

    ajax.js (function(exports, document, undefined){ "use strict"; function Ajax(){ if(!(this ...

  7. 几种图片下载lib对比

  8. zeromq 测试总结

    总结 测试项目 github (https://github.com/solq360/jmzq) 非常不稳定 pub/sub 模式 30W压测丢了27W条消息,官方没有给出任何的发送状态供业务层处理 ...

  9. Netty5 + HTTPS 练习

    本次以<Netty权威指南>第十章里面的例子为基础修改而来 HttpsFileServerHandler.java package com.jieli.nettytest.httpsfil ...

  10. 贴近用户体验的jQuery日期选择插件

    分享一款贴近用户体验的jQuery日期选择插件.这是一款双日历jQuery日期选择时间插件pickerDateRange.效果图如下: 在线预览   源码下载 var dateRange = new ...