javascript如何实现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>
以上就是本文的全部内容，希望对大家的学习有所帮助。
相关推荐
-
javascript制作幻灯片（360度全景图片）
在给客户做产品演示时经常会用到幻灯片,拥有360度的全景图片效果给用户带来好的体验价值.在这里给大家介绍一款来自Robert Pataki的360全景幻灯实现教程,此款教程使用js来实现一个超酷的全景幻灯,具体内容如下: 在这个教程中没有使用到任何插件,我们将使用HTML,css和javascript来实现,当然,也使用是jQuery这个框架! 如何实现? 我们将使用预先按照360生成的图片进行轮播来实现动画展示效果.包含了180个图片.所以加载时间可能比较长. 代码实现 我们将在css代码中添
-
利用C#代码实现图片旋转360度
using System; using System.Collections.Generic; using System.Drawing; using System.IO; using System.Linq; using System.Text; namespace 图片旋转程序 { public class ImageHelper { /// <summary> /// 以逆时针为方向对图像进行旋转 /// </summary> /// <param name="
-
JavaScript控制图片360度旋转代码
JavaScript控制图片360度旋转代码 var isIE = (document.uniqueID)?1:0; var i=1; function rotate(image) { var object = image.parentNode; if(isIE){ image.style.filter="progid:dXImagetransform.Microsoft.basicImage(rotation="+i+")"; i++; if(i>4) {i
-
js实现按钮控制图片360度翻转特效的方法
本文实例讲述了js实现按钮控制图片360度翻转特效的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <title>js实现按钮控制图片360度翻转特效</title> <body> <script language="javascript"> var isIE = (document.uniqueID)?1:0; var i=1; function rotate(image) { var o
-
Android开发VR实战之播放360度全景视频
VR即Virtual Reality虚拟现实.虚拟现实技术是一种可以创建和体验虚拟世界的计算机仿真系统它利用计算机生成一种模拟环境是一种多源信息融合的交互式的三维动态视景和实体行为的系统仿真使用户沉浸到该环境中. 那么,如何在Android中去开发VR功能的APP呢?我们利用谷歌提供的开源SDK去实现一个360°全景视频的功能 一.在build.gradle中引入谷歌VR的SDK依赖 compile 'com.google.vr:sdk-videowidget:1.10.0' 二.注意支持的最小
-
基于Three.js插件制作360度全景图
这是个基于three.js的插件,预览地址:戳这里 使用方法: 1.这个插件的用法很简单,引入如下2个js <script src="js/three.min.js"></script> <script src="js/photo-sphere-viewer.min.js"></script> 2.初始化一下,(具体各种参数配置根据情况而定) var PSV = new PhotoSphereViewer({ // 全
-
基于jQuery Circlr插件实现产品图片360度旋转
Circlr是一款可以对产品图片进行360度全方位旋转展示的jQuery插件.Circlr通过按一定角度规律拍摄的产品图片,制作出可以使用鼠标拖动.鼠标滚轮和移动触摸来进行图片逐帧旋转的效果.比先前的Rollerblade,动画顺畅了许多,也更易于控制,该插件非常适合于商品的展示. 它的特点有: 支持水平或垂直方向旋转. 支持移动触摸事件. 支持滚动事件. 图片预加载处理. 可以反向和循环旋转图片. jQ酷实例教程:jQuery产品图片360度旋转Circlr 引入核心文件 <script sr
-
jQuery实现的产品自动360度旋转展示特效源码分享
这是一款基于jQuery实现的产品自动360度旋转展示特效代码,可以对产品进行360度旋转展示,更好的让顾客了解产品的全部外观细节. jQuery产品360度旋转展示代码,支持预加载,能够快速全面的的预览产品的图片,主要原理是利用多张图片按顺序播放实现,本段代码兼容目前最新的各类主流浏览器,是一款非常优秀的特效源码. 运行效果图:---------------------------------效果查看 源码下载----------------------------------- 为大家分享的
-
JS实现全景图效果360度旋转
var scrl,direction="right"; var x,xold,xdiff, i=1; function change(start){ if(direction == "right"){ if(div1.scrollTop+190 0){ div1.scrollTop -= 190; } else{ div1.scrollTop = div1.scrollHeight; } } if(start) scrl = setTimeout("cha
-
javascript如何实现360度全景照片问题汇总
本文为大家分享了做360度的全景照片的详细步骤,其中要注意以下几个问题: 1.如何在拖图片时,使其加载变快?---注意让图片隐藏的性能比让图片切换的性能高,且在IE9下运行,会出现图片加载的问题 2.如何使图片带有一定的速度转 3.考虑如果x为负数和负数两种情况 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xht
-
13 款最热门的 jQuery 图像 360 度旋转插件推荐
在 web 页面上使用 jQuery 图像 360 度旋转插件是最美也是最方便的显示图像的方式.这些超级棒的 360° 图像选择插件允许用户更详细的分析产品或者文章.jQuery 图像旋转插件可以让用户从各种角度进行 360 度的图像展示,经常在电子商务网站上使用,帮助消费者更好的了解产品,从任意的一个角度观察欣赏. 在这篇文章中,我们收集了 13 款最佳的 jQuery 图像 360 度旋转插件,这些插件都能进行 360 度图像旋转展示.希望大家能从中找到自己喜欢的,并应用在自己的网站上. 1
-
javascript+jQuery实现360开机时间显示效果
实现效果: 实现原理: 给关闭按钮绑定点击事件,点击以后触发动画效果.利用jQuery的animate方法,先让显示天气的盒子高度变为0,接着让整个包含天气和事件的盒子宽度变为0,最后通过将display属性值设为none,使得close按钮消失. 实现代码: <!DOCTYPE html> <html> <head> <title>仿360开机效果</title> <meta charset="utf-8"> &
-
Javascript校验密码复杂度的正则表达式
目前使用的正则表达式如下: 复制代码 代码如下: (?=.*\d)(?=.*[a-zA-Z])(?=.*[^a-zA-Z0-9]).{8,30} 对应的验证规则是:密码中必须包含字母.数字.特称字符,至少8个字符,最多30个字符. 这个正则表达式在C#可以正常使用,但是在Javascript中却有问题. 请问是在js中如何写这样的正则表达式? 测试字符串:a123456- 解决方法如下所示: 把\d改为[0-9]问题就解决了,正则表达式如下: 复制代码 代码如下: var regex = new