<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8">
<title>Full 360 degree View</title>
<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;
window.onload = function() {
var canvas = document.getElementById("fullview_canvas");
canvas.width = 440;// window.innerWidth;
canvas.height = 691;//window.innerHeight;
width = canvas.width;
height = canvas.height;
var bar = document.getElementById('loadProgressBar');
for(var i=1; i<24; i++)
{
bar.value = i;
if(i<10)
{
images[i] = new Image();
images[i].src = "0" + i + ".jpg";
}
else
{
images[i] = new Image();
images[i].src = 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';
}
}
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 loaded() {
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>
<progress id="loadProgressBar" value="0" max="23"></progress>
<canvas id="fullview_canvas"></canvas>
<button onclick="loaded()">Auto Play</button>
</body>
</html>
fullview.zip （24个子文件） 
fullview 
01.jpg 35KB 05.jpg 25KB 15.jpg 30KB 07.jpg 29KB 14.jpg 34KB 04.jpg 29KB 19.jpg 32KB 21.jpg 36KB 11.jpg 37KB 08.jpg 31KB 23.jpg 37KB 10.jpg 36KB 22.jpg 37KB
fullview.html 3KB 17.jpg 26KB 18.jpg 28KB 13.jpg 36KB 16.jpg 28KB 12.jpg 37KB 03.jpg 31KB 20.jpg 34KB 06.jpg 25KB 02.jpg 34KB 09.jpg 34KB
gloomyfish
- 粉丝: 7830
- 资源: 13
最新资源
- HengCe-18900-2024-2030全球与中国eMMC和UFS市场现状及未来发展趋势-样本.docx
- 2024第十四届APMCM亚太地区-C题完整论文.pdf
- HengCe-18900-2024-2030中国硬碳负极材料市场现状研究分析与发展前景预测报告-样本.docx
- PHP面向对象与设计模式
- HengCe-2024-2030全球与中国掩模基板市场现状及未来发展趋势-样本
- CSS3制作的聚光灯下倒影文字选装动画特效代码.zip
- mongodb笔记和资料
- 工具变量2022-2004年中国省级市场分割指数数据.xlsx
- stm32f1 编写MPU6050程序代码
- js+jquery实现经典推箱子游戏
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
- 1
- 2
- 3
- 4
- 5
- 6
前往页