体验效果：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. Identifier 'Logic.DomainObjectBase._isNew' is not CLS-compliant

    http://stackoverflow.com/questions/1195030/why-is-this-name-not-cls-compliant To get around this err ...

  2. 【转】Windows Phone 8 开发环境的搭建

    1.先安装Microsoft Visual Studio 2012旗舰版,安装包自己下载. 系统必须是Win8 X64 对于软硬件的检测可以参照: Windows Phone 8开发环境搭建之一.电脑 ...

  3. [译]PostCSS介绍

    PostCSS介绍 原文链接:http://www.smashingmagazine.com/2015/12/introduction-to-postcss/ 转自:http://www.zcfy.c ...

  4. Django 源码小剖: URL 调度器(URL dispatcher)

    在刚开始接触 django 的时候, 我们尝试着从各种入门文档中创建一个自己的 django 项目, 需要在 mysite.urls.py 中配置 URL. 这是 django url 匹配处理机制的 ...

  5. java模拟开锁

    java模拟开锁 service qq:928900200 Introduction to Computer Science II: CSCI142Fall 2014Lab #1Instructor: ...

  6. Generating a new ASP.NET session in the current HTTPContext

    void regenerateId() { System.Web.SessionState.SessionIDManager manager = new System.Web.SessionState ...

  7. database link

    create database link lims_qumas_supplyconnect to QPROCESSDEV identified by qprocessdevusing '(DESCRI ...

  8. Onmouseover被调用多次

    当一个容器,如div,不包含元素时.Onmouseover只执行一次,正常.当这个div包含其他子元素的时候,这个事件就被执行了多次,今天遇到了这个问题,特此记录下,解决方案. 这个是由于onmous ...

  9. AjaxUploader使用

    一.简单上传(Simple Upload with Progress) <CuteWebUI:Uploader ID="ajaxUploader" runat="s ...

  10. Qt label加边框

    myLabel->setStyleSheet("border:1px solid black"); 简要说明:border就是边缘.px是像素,1px就是边框的宽度.soli ...