javascript如何实现360度全景照片问题汇总


Posted in Javascript onApril 04, 2016

本文为大家分享了做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>

以上就是本文的全部内容,希望对大家的学习有所帮助。

Javascript 相关文章推荐
jquery $.ajax入门应用二
Nov 19 Javascript
Jquery Ajax学习实例3 向WebService发出请求,调用方法返回数据
Mar 16 Javascript
在JavaScript中获取请求的URL参数
Dec 22 Javascript
滚动图片效果 jquery实现回旋滚动效果
Jan 08 Javascript
js加减乘除丢失精度问题解决方法
May 16 Javascript
Hallo.js基于jQuery UI所见即所得的Web编辑器
Jan 26 Javascript
vue中渐进过渡效果实现
Oct 27 Javascript
tangram.js库实现js类的方式实例分析
Jan 06 Javascript
js经验分享 JavaScript反调试技巧
Mar 10 Javascript
javascript和php使用ajax通信传递JSON的实例
Aug 21 Javascript
利用JS代码自动删除稿件的普通弹幕功能
Sep 20 Javascript
学习 Vue.js 遇到的那些坑
Feb 02 Vue.js
javascript制作照片墙及制作过程中出现的问题
Apr 04 #Javascript
javascript拖拽效果延伸学习
Apr 04 #Javascript
javascript事件委托的用法及其好处简析
Apr 04 #Javascript
基于javascript制作微博发布栏效果
Apr 04 #Javascript
纯js实现手风琴效果
Apr 17 #Javascript
AngularJS中的$watch(),$digest()和$apply()区分
Apr 04 #Javascript
Angular 根据 service 的状态更新 directive
Apr 03 #Javascript
You might like
php的mkdir()函数创建文件夹比较安全的权限设置方法
2014/07/28 PHP
php实现将base64格式图片保存在指定目录的方法
2016/10/13 PHP
PHP实现对xml进行简单的增删改查(CRUD)操作示例
2017/05/19 PHP
php多进程并发编程防止出现僵尸进程的方法分析
2020/02/28 PHP
popdiv
2006/07/14 Javascript
JavaScript为事件句柄绑定监听函数实例详解
2015/12/15 Javascript
利用JavaScript实现拖拽改变元素大小
2016/12/14 Javascript
nodejs学习笔记之路由
2017/03/27 NodeJs
jQuery获取table表中的td标签(实例讲解)
2017/07/28 jQuery
基于js粘贴事件paste简单解析以及遇到的坑
2017/09/07 Javascript
Vue实现侧边菜单栏手风琴效果实例代码
2018/05/31 Javascript
JavaScript闭包原理与用法实例分析
2018/08/10 Javascript
NodeJS如何实现同步的方法示例
2018/08/24 NodeJs
使用vue开发移动端管理后台的注意事项
2019/03/07 Javascript
JavaScript实现图片放大镜效果
2019/06/27 Javascript
在Vue项目中使用Typescript的实现
2019/12/19 Javascript
Python实现对excel文件列表值进行统计的方法
2015/07/25 Python
python字符串的常用操作方法小结
2016/05/21 Python
Python 闭包的使用方法
2017/09/07 Python
Python Datetime模块和Calendar模块用法实例分析
2019/04/15 Python
Python:Numpy 求平均向量的实例
2019/06/29 Python
对Python获取屏幕截图的4种方法详解
2019/08/27 Python
python中怎么表示空值
2020/06/19 Python
英国在线女鞋目的地:SIMMI
2018/12/27 全球购物
新西兰最大的连锁超市:Countdown
2020/06/04 全球购物
什么是网络协议
2016/04/07 面试题
承认错误的检讨书
2014/01/30 职场文书
幼儿教师演讲稿
2014/05/06 职场文书
小学教师学习党的群众路线教育实践活动心得体会
2014/10/31 职场文书
2014年教学管理工作总结
2014/12/02 职场文书
烈士陵园观后感
2015/06/08 职场文书
重阳节座谈会主持词
2015/07/03 职场文书
婚宴来宾致辞
2015/07/28 职场文书
小学教师教育随笔
2015/08/14 职场文书
Python OpenCV 图像平移的实现示例
2021/06/04 Python
mysql中关键词exists的用法实例详解
2022/06/10 MySQL