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() ...
随机推荐
- 【转】TCP协议的无消息边界问题
http://www.cnblogs.com/eping/archive/2009/12/12/1622579.html 使用TCP协议编写应用程序时,需要考虑一个问题:TCP协议是无消息边界的, ...
- 移动应用安全开发指南（Android）--完结篇(http://www.bubuko.com/infodetail-577312.html)
1.认证和授权 概述 认证是用来证明用户身份合法性的过程,授权是用来证明用户可以合法地做哪些事的过程,这两个过程一般是在服务器端执行的,但也有的APP出于性能提升或用户体验等原因,将其做在客户端完成, ...
- 三层架构与MVC & 设计模式的较量
刚刚学习了三层架构,并且正在实际应用中,但随着学习的深入,又了解到了一个叫MVC的东西,(早在设计模式中就听到过MVC,仅仅是简单查了一下什么意思.)如今正好把这三个东西放在一起聊聊. 三层 是一个分 ...
- 查看iOS模拟器应用的沙箱文件
iOS 升级到8.3 以后就不能用iFunBox 这样的工具看沙箱里的文件了(非共享的), 而开发时我们的数据库文件又不在共享目录里.关于这个问题,我们可以看模拟器里的沙箱文件, iOS8.0 以后, ...
- iOS10 CoreData新特性
原文地址:What's New in Core Data in macOS 10.12, iOS 10.0, tvOS 10.0, and watchOS 3.0 翻译者:肖品,原创文章转载请著名出处 ...
- SQLSERVER吞噬内存解决记录
现在手上有一个不大不小的系统,运行了一段时间,因为是24*7不断运行,所以内存逐渐增高,慢慢的会飙到95%以上,然后不得不重启电脑,因为用的是云,怕虚拟机重启down掉起不来,重启操作还只能在凌晨4. ...
- 像table一样布局div
原文:http://www.456bereastreet.com/archive/200405/equal_height_boxes_with_css/ 下面是我翻译的内容,是根据我对文章的理解意译的 ...
- JS - Constructor还可以这样用
JS中Constructor好用法: 即在只知道一个对象实例的情况下(不知道对象名),重新初始化一个新实例: function Person( firstname, lastname, age ) { ...
- 让Windows 7变成WIFI热点
360要推便携路由器,个人觉得其主要目的是盯住了用户无线设备上的信息.因为如果用户移动设备都通过它这个路由器走的话,未加密的数据全部在他掌控之中. 其实Windows 7以上的系统是非常容易建立无线热 ...
- angularjs + seajs构建Web Form前端(二)
回顾 上一篇讲解了引入bootstrap构建一个简单的登录页面,如何让angularjs自动启动并绑定视图,操作过程当中如何使用ui-bootstrap,继而完成简单功能后如何引入seajs后如何使n ...