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 相关文章推荐
Javascript中的作用域和上下文深入理解
Jul 03 Javascript
AngularJS使用指令增强标准表单元素功能
Jul 01 Javascript
bootstrap datetimepicker2.3.11时间插件使用
Nov 19 Javascript
JavaScript日期选择功能示例
Jan 16 Javascript
jQuery 利用ztree实现树形表格的实例代码
Sep 27 jQuery
angular4自定义组件详解
Sep 28 Javascript
微信小程序实现下拉菜单切换效果
Mar 30 Javascript
bootstrap table实现合并单元格效果
Dec 24 Javascript
JavaScript中this用法学习笔记
Mar 17 Javascript
微信小程序实现搜索历史功能
Mar 26 Javascript
koa2+vue实现登陆及登录状态判断
Aug 15 Javascript
mpvue微信小程序的接口请求fly全局拦截代码实例
Nov 13 Javascript
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实现密保卡功能实现代码&amp;lt;打包下载直接运行&amp;gt;
2011/10/09 PHP
hadoop中一些常用的命令介绍
2013/06/19 PHP
thinkPHP多语言切换设置方法详解
2016/11/11 PHP
thinkphp5+layui实现的分页样式示例
2019/10/08 PHP
如何在PHP中读写文件
2020/09/07 PHP
javascript时间函数基础介绍
2013/03/28 Javascript
JS 加入收藏夹的代码(主流浏览器通用)
2013/05/13 Javascript
纯Javascript实现Windows 8 Metro风格实现
2013/10/15 Javascript
JS之Date对象和获取系统当前时间详解
2014/01/13 Javascript
Javascript动画的实现原理浅析
2015/03/02 Javascript
jsonp跨域请求数据实现手机号码查询实例分析
2015/12/12 Javascript
jQuery插件easyUI实现通过JS显示Dialog的方法
2016/09/16 Javascript
搭建基于express框架运行环境的方法步骤
2018/11/15 Javascript
用Vue编写抽象组件的方法
2019/05/06 Javascript
解决vue cli使用typescript后打包巨慢的问题
2019/09/30 Javascript
js canvas实现星空连线背景特效
2019/11/01 Javascript
Python天气预报采集器实现代码(网页爬虫)
2012/10/07 Python
Python手机号码归属地查询代码
2016/05/04 Python
Python简单检测文本类型的2种方法【基于文件头及cchardet库】
2016/09/18 Python
Python黑帽编程 3.4 跨越VLAN详解
2016/09/28 Python
使用python验证代理ip是否可用的实现方法
2018/07/25 Python
Python自定义一个异常类的方法
2019/06/27 Python
Jupyter notebook无法导入第三方模块的解决方式
2020/04/15 Python
详解基于python的全局与局部序列比对的实现(DNA)
2020/10/07 Python
如何强制垃圾回收
2015/10/06 面试题
估算杭州有多少软件工程师
2015/08/11 面试题
init进程的作用
2012/04/12 面试题
应届毕业生求职信
2013/11/30 职场文书
彩色的非洲教学反思
2014/02/18 职场文书
网络宣传方案
2014/03/15 职场文书
还款承诺书范本
2015/01/20 职场文书
幼师自荐信范文
2015/03/06 职场文书
邮政营业员岗位职责
2015/04/14 职场文书
关于车尾的标语大全
2015/08/11 职场文书
2016年第二十五次全国助残日活动总结
2016/04/01 职场文书
教你一步步实现一个简易promise
2021/11/02 Javascript