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>


猜你喜欢
- 最近将Jesse James Garrett的《用户体验的要素》一书读了两遍,做一些简要的摘录并添加一些个人注释。当然,一本好书绝对不是简单
- 直接to_excel会被覆盖,借助ExcelWriter可以实现写多个sheet。from openpyxl import load_wor
- 现在网页设计师除了把页面做的漂亮以外,越来越注重“用户体验”,就是要做“别让用户思考”的网页,使网站真正做到“可用性”。望望结合几年的工作经
- 本文实例讲述了Python实现利用最大公约数求三个正整数的最小公倍数。分享给大家供大家参考,具体如下:在求解两个数的小公倍数的方法时,假设两
- 目录结构:contents structure [-]在开始文章之前,先贴上一张Iterable、Iterator与Generator之间的
- opts, args = getopt.getopt(sys.argv[1:], "t:s:h", ["wal
- 1.进入官网https://www.python.org/,点击Downloads下的Windows按钮,进入下载页面。2.如下图所示,点击
- dotnet run 介绍dotnet 相关命令是属于 .NET Core command-line (CLI) 的一部分,Microsof
- 本章节将为大家介绍Python循环语句的使用。Python中的循环语句有 for 和 while。Python循环语句的控制结构图如下所示:
- 目录一,python介绍二.python的安装程序三、变量python基础部分学习一,python介绍python的创始人为吉多·范罗苏姆(
- 在新的公司开始上班,今天工作的主题内容是市场部门需要抓取一些论坛用户的邮箱,以便发送营销邮件。于是用了一个python脚本来执行,前面抓了几
- 在这里我们介绍两个拼接数组的方法:np.vstack():在竖直方向上堆叠np.hstack():在水平方向上平铺import numpy
- AdobeAdobe公司的标识1982年,40多岁的程序员约翰·沃诺克(John Warnock)和查尔斯·杰斯克(Charles Gesc
- 今天在这里,不以设计师的身份,而从一个普通用户的角度和各位聊聊设计中蕴含的那份情感,关于情感再产品设计中的意义,聊聊设计中的那份源于“心”的
- 前言:假设我们已经了解vue组件常见的有父子组件通信,兄弟组件通信。而父子组件通信很简单,父组件会通过 props 向下传数据给子组件,当子
- sort包简介官方文档Golang的sort包用来排序,二分查找等操作。本文主要介绍sort包里常用的函数,通过实例代码来快速学会使用sor
- python类class定义及其初始化定义类,功能,属性一般类名首字母大写class Calculator:#名字和价格是属性
- 1、说明使用递归函数的优点是逻辑简单清晰,缺点是过深的调用会导致栈溢出。解决递归调用栈溢出的方法是通过尾递归优化,事实上尾递归和循环的效果是
- Sql中in和not in中有null值的情况1)in的逻辑规则是or not in 的逻辑规则是 and2)判断null 的sql语句为
- 虽然有些人认为区块链是一个早晚会出现问题的解决方案,但是毫无疑问,这个创新技术是一个计算机技术上的奇迹。那么,究竟什么是区块链呢?区块链以比