html5人物图片360度立体旋转

发布时间：2020-12-14 22:55:04 所属栏目：大数据来源：网络整理

导读：今天PHP站长网 52php.cn把收集自互联网的代码分享给大家，仅供参考。 !DOCTYPE htmlhtmlheadmeta charset="utf-8"titleFull 360 degree View - HoverTree/titlestyle.hvtholder {margin: 0px auto;width: 789px;text-alig

以下代码由PHP站长网 52php.cn收集自互联网

现在PHP站长网小编把它分享给大家，仅供参考

<!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,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,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,width,height)
ctx.drawImage(imageObj,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>  <a href="http://hovertree.com/texiao/html5/10.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>

以上内容由PHP站长网【52php.cn】收集整理供大家参考研究

如果以上内容对您有帮助，欢迎收藏、点赞、推荐、分享。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!