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 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度立体旋转的更多相关文章
- HTML实现图片360度循环旋转
<style> .header{ -webkit-animation:rotateImg 5s linear infinite;<!--修改旋转周期--> border: 1p ...
- 通过CSS3实现：鼠标悬停图片360度旋转效果
效果很好玩,代码很简单: 效果: 鼠标放置在图片上:360度顺时针旋转 鼠标离开图片:图片260度逆时针旋转 只要将下面代码拷贝过去,并将图片改成你想要的就可以看到效果 <!doctype ht ...
- 360度3D 旋转插件
Circlr插件是一款基于jQuery的可以对图片进行360度全方位旋转展示的插件.Circlr通过按一定角度规律拍摄的产品图片,制作出可以使用鼠标拖动.鼠标滚轮和移动触摸来进行图片逐帧旋转的效果.比 ...
- 原生Js封装的产品图片360度展示
挺简单的一段程序,但是效果不错: 1.把需要展示的36张图片先预加载到浏览器缓存里 2.给展示图片的div添加方法 3.通过鼠标左右移动的像素转换图片 在线效果预览:http://jsfiddle.n ...
- HTML5 Canvas实现360度全景图
原文:http://blog.csdn.net/jia20003/article/details/17172571 很多购物网站现在都支持360实物全景图像,可以360度任意选择查看样品,这样 对购买 ...
- html5 图片360旋转
test.html <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- C# 图片旋转360度程序
这几天开发一个程序,需要将一个图片旋转360度然后每一个角度保存下来.刚开始本来想着是让美工弄的,但是让一个美工手动转360度,她会喷你一脸. using System; using System.C ...
- 安卓端360度全景图的html5实现
这里是一款旅游相关的安卓应用,其中虚拟旅游的功能采用html5的360度全景图技术实现,使用户能够身临其境的感受旅游景点的风光. 此处引入了ddpanorama插件,它的原理是在canvas上绘制全景 ...
- Swift--使图片360° 周期旋转
UIImageView+Extension.swift import UIKit extension UIImageView { // 360度旋转图片 func rotate360Degree() ...
随机推荐
- [转] jQuery对象与DOM对象之间的转换
http://wozailongyou.iteye.com/blog/299311 http://blog.allenm.me/2009/07/jquery%E4%B8%ADid%E5%92%8Cdo ...
- 【转】ASP.NET WEB API系列教程
from: 西瓜小强 http://www.cnblogs.com/risk/category/406988.html ASP.NET Web API教程(六) 安全与身份认证 摘要: 在实际的项目应 ...
- 关于stacking context和CSS z-index的总结
HTML中决定元素叠加顺序的CSS属性最有名的应该是z-index了.但是,往往在项目中发现有些情况和我们的预期不太一致.经过研究和学习,总算搞清楚了其中的关系.简单总结如下: 只有Positione ...
- ionic hybrid备忘
ionic 是目前最有潜力的一款开源Hybrid( HTML5+css3+nodejs+Angularjs+PhoneGap)手机应用开发框架.通过 SASS 构建应用程序,它提供了很多 UI 组件来 ...
- 在SpringMVC中获取request对象的几种方式
1.最简单的方式(注解法) @Autowired private HttpServletRequest request; 2.最麻烦的方法 a. 在web.xml中配置一个监听 <listene ...
- [亿能测试_www.gdtesting.com]测试技术资料网盘共享
[亿能测试_www.gdtesting.com]测试技术资料网盘共享: http://pan.baidu.com/share/home?uk=974090852
- 写出几种IE6 BUG的解决方法
1.双边距BUG float引起的 使用display:inline 2.3像素问题 使用多个float和注释引起的 使用dislpay:inline -3px 3.超链接hover 点击后失效 ...
- 二十七、EFW框架BS系统开发中的MVC模式探讨
回<[开源]EFW框架系列文章索引> EFW框架源代码下载V1.3:http://pan.baidu.com/s/1c0dADO0 EFW框架实例源代码下载:http://p ...
- There is an internal error in the React performance measurement code.Did not expect componentDidMount timer to start while render timer is still in progress for another instance
一.There is an internal error in the React performance measurement code.Did not expect componentDidMo ...
- Python Django 开发 2 数据库
一半教程用的Django都是1.8以前的版本,导致跟我用的1.8.2的版本用法有些出入,所以只能自己去官网看文档,以下一下是看官方文档而理解的,英语渣渣,可能会有理解有误的地方 先记录下如何查看dja ...