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() ...
随机推荐
- 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 ...
- 【转】Windows Phone 8 开发环境的搭建
1.先安装Microsoft Visual Studio 2012旗舰版,安装包自己下载. 系统必须是Win8 X64 对于软硬件的检测可以参照: Windows Phone 8开发环境搭建之一.电脑 ...
- [译]PostCSS介绍
PostCSS介绍 原文链接:http://www.smashingmagazine.com/2015/12/introduction-to-postcss/ 转自:http://www.zcfy.c ...
- Django 源码小剖: URL 调度器(URL dispatcher)
在刚开始接触 django 的时候, 我们尝试着从各种入门文档中创建一个自己的 django 项目, 需要在 mysite.urls.py 中配置 URL. 这是 django url 匹配处理机制的 ...
- java模拟开锁
java模拟开锁 service qq:928900200 Introduction to Computer Science II: CSCI142Fall 2014Lab #1Instructor: ...
- Generating a new ASP.NET session in the current HTTPContext
void regenerateId() { System.Web.SessionState.SessionIDManager manager = new System.Web.SessionState ...
- database link
create database link lims_qumas_supplyconnect to QPROCESSDEV identified by qprocessdevusing '(DESCRI ...
- Onmouseover被调用多次
当一个容器,如div,不包含元素时.Onmouseover只执行一次,正常.当这个div包含其他子元素的时候,这个事件就被执行了多次,今天遇到了这个问题,特此记录下,解决方案. 这个是由于onmous ...
- AjaxUploader使用
一.简单上传(Simple Upload with Progress) <CuteWebUI:Uploader ID="ajaxUploader" runat="s ...
- Qt label加边框
myLabel->setStyleSheet("border:1px solid black"); 简要说明:border就是边缘.px是像素,1px就是边框的宽度.soli ...