javascript如何实现360度全景照片问题汇总
作者:向婷风 发布时间:2024-04-10 10:43:38
标签:js,360度全景照片
本文为大家分享了做360度的全景照片的详细步骤,其中要注意以下几个问题:
1、如何在拖图片时,使其加载变快?---注意让图片隐藏的性能比让图片切换的性能高,且在IE9下运行,会出现图片加载的问题
2、如何使图片带有一定的速度转
3、考虑如果x为负数和负数两种情况
代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
window.onload=function ()
{
var oImg=document.getElementById('img1');//第一张图片
var aImg=document.getElementsByTagName('img');
var lastimage=oImg;
var x=0;//鼠标拖动某一个点,用该点的位置,来改变src
var speed=0;
var lastx=0;
var timer=null;
var temp=0;
for(i=0;i<77;i++)
{
var oNewImage=document.createElement('img');
oNewImage.src='img/miaov ('+i+').jpg';
oNewImage.style.display='none';
document.body.appendChild(oNewImage);//先将77张图片隐藏
}
document.onmousedown=function(ev)
{
clearInterval(timer);
var oEvent=ev||event;
var disx=oEvent.clientX-x;
document.onmousemove=function(ev)
{
var oEvent=ev||event;
x=oEvent.clientX-disx;
setMove();
speed=x-lastx;//记录前后两个速度
lastx=x;
return false;
}
document.onmouseup=function()
{
document.onmousemove=null;
document.onmouseup=null;
timer=setInterval(function(){
x+=speed;
setMove();
document.title=speed;
},30);
}
function setMove()
{
if(speed>0){speed--;}
else if(speed==0){clearInterval(timer);}
else {speed++;}
temp=-x;//temp要设为全局变量
if(temp>0)
{
temp=-x%77;
}
else
{
temp=-x+(-Math.floor(-x/77)*77);
}
//oImg.src='img/miaov ('+temp+').jpg'; //这里外面要用单引号
//alert(aImg.length);
lastimage.style.display='none';//先让最后一张变为none(刚开始也为第一张,鼠标没有移动时,第一张图片是显示的)
aImg[temp].style.display='block';//当打开页面时,出现的默认为第一张图片
lastimage=aImg[temp];
document.title=temp;
}
return false;
}
}
</script>
</head>
<body>
<img id="img1" src="img/miaov (0).jpg" />
<!--<div id="bg"></div>
<div id="prog">
360度全景展示 载入中......<span>0%</span>
<div id="bar"></div>
</div>-->
</body>
</html>
0
投稿
猜你喜欢
- 本文实例讲述了Python基于opencv的图像压缩算法。分享给大家供大家参考,具体如下:插值方法:CV_INTER_NN - 最近邻插值,
- 1.了解oracle外部表 外部表定义:结构被存放在数据字典,而表数据被放在OS文件中的表 作用:在数据库中查询OS文件的数据,还可以将OS
- ./当前目录 /网站主目录 ../上层目录 ~/网站虚拟目录 如果当前的网站目录为E:\wwwroot 应用程序虚拟目录为E:\wwwroo
- 在用Python开发时(Windows环境),会碰到需要安装某个版本的第三方库,为了以后查找、安装方便,总结如下:windows版的各种Py
- python 内置函数filterclass filter(object): """ filter(funct
- 前言selenium处理文件上传大致会有两种情况,一种是文件上传使用的是input标签元素,即<input type="fi
- SELECT SUBSTR (T.RPT_ID, &nbs
- 说起计算机中的时间,还有一些比较有意思的事,比如我们经常听到的Unix时间戳,UTC时间,格林威治时间等,从表示上来讲他们基本属于同一个东西
- 迷宫问题问题描述:迷宫可用方阵 [m, n] 表示,0 表示可通过,1 表示不能通过。若要求左上角 (0, 0) 进入,设计算法寻求一条能从
- Anaconda简介Anaconda,是一个开源的Python发行版本,其包含了conda、Python以及一大堆安装好的工具包及依赖项,比
- pip 是 Python 包管理工具,该工具提供了对Python 包的查找、下载、安装、卸载的功能。pip检测更新命令:pip list –
- python的scipy.stats模块是连续型随机变量的公共方法,可以产生随机数,通常是以正态分布作为scipy.stats的基本使用方法
- MySQL4.1以前版本服务器只能使用单一字符集,从MySQL4.1版本开始,不仅服务器能够使用多种字符集,而且在服务器、数据库、数据表、数
- 查看python内部模块命令,内置函数,查看python已经安装的模块命令可以用dir(modules)或者用 pip list或者用 he
- Python是一门弱类型语言,很多从C/C++转过来的朋友起初不是很适应。比如,在声明一个函数时,不能指定参数的类型。用C做类比,那就是所有
- 有一个表user,字段分别有id、nick_name、password、email、phone。一、单字段(nick_name)查出所有有重
- 作者的blog:http://www.planabc.netz-index属性简介引用:z-index : auto | numberaut
- 前言这里要说明一下,本文包含的代码其中一部分并不是自己写的,是我找了很多文章拼凑出来的,比如如何找相同内容的单元格、怎么合并、怎么居中等等。
- 简单的合并,本例是横向合并,纵向合并可以自行调整。import xlrd import xlwtimport shutil from xlu
- MySQL多个left join on关联条件顺序注意:下面的案例特别重要!请重视!SQL有点长,但确实是干货!结论如果存在多个left j