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() ...
随机推荐
- 【Theano】安装Theano
http://blog.csdn.net/niuwei22007/article/details/47684673 http://blog.csdn.net/m624197265/article/de ...
- [原创]自定义view之：快速开发一款Material Design风格的dialog的开源项目MDDialog
随着google开始主导Material Design风格的设计,越来越多的app开始使用Material Design风格来设计自己的UI.虽然在Android Studio中集成了多种快速开发框架 ...
- 修改windows系統下xampp中apache端口被其他程式占用的問題
windows 7安裝後啟動xampp, 提示port 443 被其他程式占用. 網上查找解決方案: http://stackoverflow.com/questions/21182512/how-t ...
- System.Diagnostics.Stopwatch
System.Diagnostics.Stopwatch 注意:此类在 .NET Framework 2.0 版中是新增的.MSDN Stopwatch 实例可以测量一个时间间隔的运行时间,也可以测量 ...
- Cocos2dx 把 glview 渲染到 Qt 控件上（Mac 环境）
本文原链接:http://www.cnblogs.com/zouzf/p/4423256.html 环境:Mac 10.9.2 Xcode5.1.1 Qt5.3 cocos2dx-2.2.4 ...
- 多条件动态LINQ 组合查询
本文章转载:http://www.cnblogs.com/wangiqngpei557/archive/2013/02/05/2893096.html 参考:http://dotnet.9sssd.c ...
- Win7下使用Telnet命令
在调试网络端口是否通畅的时候会经常使用到telnet命令,但是在Windows7系统下这个命令默认是不开启的. 开启Telnet命令的方法: 1.在开始程序里,打开控制面板. 2.在控制面板里,点击“ ...
- haproxy 配置
1.环境: 操作系统:CentOS 6.4 haproxy: 1.3.15.10 [下载:http://download.chinaunix.net/download.php?id=25784& ...
- 详解shape标签
转载自:http://blog.csdn.net/harvic880925/article/details/41850723 一.简单使用 刚开始,就先不讲一堆标签的意义及用法,先简单看看shape标 ...
- 3-5年的PHPer常见的面试题
看到有很多,的总结一下,比较适合有一定经验的PHPer 1.平时喜欢哪些php书籍及博客?CSDN.虎嗅.猎云 2.js闭包是什么? 3.for与foreach哪个更快? 4.php鸟哥是谁?能不能讲 ...