[JavaScript案例]360度全景照片

案例: 360度全景照片鼠标在页面上滑动时图片表现的物体会随着移动方向进行旋转，从而呈现360度物体旋转效果

思路: 将所有的图片都放入指定容器内，通过切换相应的照片隐藏与显示来实现旋转效果

代码:

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta id="viewport" name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"><title>Document</title><script type="text/javascript" src="360.js"></script></head><body><div class="container" id="page750"><img src="img/1.png"></div></body>
</html>

html,body{margin: 0;padding: 0;
}
.container{display: flex;
}
img{display: block;margin: auto;
}

window.onload = function(){var container = document.getElementById("page750");/*一次性将所有的图片标签加入*/var imgCount = 40;var lastStartX = 0;var iSpeed = 0;var timer;var _disX;for(var i = 2; i <= imgCount; i++){(function(i){var img = new Image();var imgNode = document.createElement("img");img.onload = function(){imgNode.src = this.src;imgNode.style.display = "none";container.appendChild(imgNode);};img.src = "img/"+i+".png";})(i);}var imgNodes = container.getElementsByTagName("img");var lastImgNode = container.getElementsByTagName("img")[0];var startX = 0;function mouseDownHandler(event){console.log("mouse down");clearInterval(timer);startX = event.clientX;document.addEventListener("mousemove", mouseMoveHandler);document.addEventListener("mouseup", mouseUpHandler);return false;}function mouseMoveHandler(event){console.log("mouse move");disX = event.clientX - startX;move();iSpeed = _disX - lastStartX;lastStartX = _disX;document.title = _disX;return false;}function mouseUpHandler(event){console.log("mouse up");document.removeEventListener("mousemove", mouseMoveHandler);document.removeEventListener("mouseup", mouseUpHandler);document.title = iSpeed;timer = setInterval(function(){if(iSpeed>0){iSpeed--;}else{iSpeed++;}if(iSpeed==0){clearInterval(timer);}disX += iSpeed;move();}, 20);}function move(){_disX = parseInt(disX/20);if(_disX>0){_disX = disX%imgCount;}else{_disX = disX - Math.floor(disX/imgCount)*imgCount;
        }if(lastImgNode != imgNodes[_disX]){lastImgNode.style.display = "none";imgNodes[_disX].style.display = "block";lastImgNode = imgNodes[_disX];}}document.addEventListener("mousedown", mouseDownHandler);
};

转载于:https://www.cnblogs.com/joyjoe/p/6538666.html

[JavaScript案例]360度全景照片相关推荐

怎样做360度全景照片
怎样做360度全景照片举例 Panorama Maker4软件使用方法怎样使用Panorama Maker4软件制作360度全景照片.按照软件的要求,制作所用的素材照片至少6张,但是要得到较 ...
Unity显示360度全景照片
Unity显示360度全景,其实就是把全景图片贴到一个球上,只不过,这个球是从里往外看. 先把摄像机移动到坐标(0,0,0). 添加一个球体,坐标也是(0,0,0) 把全景图片拖到球体上, 这个时候, ...
Android 360度全景照片展示
小弟初次写blog,文笔很普通,如有不当之处请多多谅解.话不多说,直接进入正题. 转载请标明出处:http://blog.csdn.net/x498980642/article/details/118 ...
360度全景照片拍照
一.什么是360度全景? 全景又被称为3D实景,是指将拍摄的水平方向360度,垂直方向180度的多张照片拼接成一张全景图像.通过后期漫游制作,让浏览者能用鼠标控制浏览的方向,可左可右.可上可下观看物体 ...
JavaScript实现360度全景图片展示效果
全景拍摄:所谓"全景拍摄"就是将所有拍摄的多张图片拼成一张全景图片.它的基本拍摄原理是搜索两张图片的边缘部分,并将成像效果最为接近的区域加以重合,以完成图片的自动拼接.现在的智能手 ...
360度全景图片怎么拍摄?
对于新手来说,拍摄360全景图片最重要的就是技术和器材,所以学习一些必要的360全景知识是非常重要的,那么360度全景图片怎么拍摄?今天就给大家介绍一下. 如何拍摄360度全景照片? 一:专业级拍摄制 ...
android 手机拍全景 java_Android 4.2系统360度全景图拍摄试玩
上周,谷歌开始销售第一批采用Android 4.2系统的Nexus4手机和Nexus7平板电脑.在全新代号为JellyBean的Android系统中,包括了一个全新的Photo Sphere的拍摄功能 ...
使用Javascript来创建一个响应式的超酷360度全景图片查看幻灯效果
在线演示本地下载 360度的全景图片效果常常可以用到给客户做产品展示,今天这里我们推荐一个非常不错的来自Robert Pataki的360全景幻灯实现教程,这里教程中将使用javascript来打 ...
java全景图片生成_[Java教程]使用Javascript来创建一个响应式的超酷360度全景图片查看幻灯效果...
[Java教程]使用Javascript来创建一个响应式的超酷360度全景图片查看幻灯效果 0 2015-07-23 18:00:14 360度的全景图片效果常常可以用到给客户做产品展示,今天这里我们 ...

[JavaScript案例]360度全景照片

[JavaScript案例]360度全景照片相关推荐

最新文章

热门文章