360度全景图片

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
#imgBox{

height: 378px;
width: 640px;
position: relative;
margin:100px auto;

}
#imgBox img{

position: absolute;

}
</style>

</head>
<body>

<div id="imgBox"><img src="img/miaov (0).jpg" height="378" width="640" id="img1" ></div>
<script>
var imgBox=document.getElementById("imgBox");

//预加载 防止卡顿
for(var i=1;i<77;i++){

(function(oImg){

var img=new Image();

img.onload=function(){

oImg.src=this.src;

}

img.src="img/miaov ("+i+").jpg";
oImg.style.display="none";
imgBox.appendChild(oImg);

})(document.createElement("img"))

}

var allImgs=document.getElementsByTagName("img");//所有图片元素
var lastImg=document.getElementById("img1");//上一张图片元素

var speed=0; //当抬起鼠标那一刻的速度
var lastPos=0;//上一次鼠标move的位置
var x=0; // 记录鼠标move的位置

var timer=null;//定时器

document.onmousedown=function(event){

clearInterval(timer);
var ev=event || window.event;

disX=ev.clientX-x; //鼠标按下的位置

document.onmousemove=function(event){

var ev=event || window.event;

x=ev.clientX-disX;

move();
speed=x-lastPos;//此时的速度 根据你鼠标移动的快慢不同 大小不同
lastPos=x;

return false; //为了拖动的时候防止选中图片

}

document.onmouseup=function(){

document.onmousemove=null;
document.onmouseup=null;

timer=setInterval(function(){

x+=speed;
move();

}, 1000/60)

}

return false; //为了拖动的时候防止选中图片
}

function move(){

speed>0?speed--:speed++;
if(speed==0){

clearInterval(timer);
}
var l=parseInt(x/10);

if(l>0){

l=l%77;

}

else{

l=l+-Math.floor(l/77)*77;

}

if(allImgs[l]!=lastImg){

lastImg.style.display="none";
allImgs[l].style.display="block";
lastImg=allImgs[l];

}

}

</script>
</body>
</html>

原文地址:https://www.cnblogs.com/liveoutfun/p/9655197.html

时间: 2024-10-03 10:57:02

360度全景图片的相关文章

使用Javascript来创建一个响应式的超酷360度全景图片查看幻灯效果

360度的全景图片效果常常可以用到给客户做产品展示,今天这里我们推荐一个非常不错的来自Robert Pataki的360全景幻灯实现教程,这里教程中将使用javascript来打造一个超酷的全景幻灯实现,相信大家一定会喜欢的! 在这个教程中没有使用到任何插件,我们将使用HTML,css和javascript来实现,当然,也使用是jQuery这个框架! 如何实现? 我们将使用预先按照360生成的图片进行轮播来实现动画展示效果.包含了180个图片.所以加载时间可能比较长. 代码实现 我们将在css代

虚幻UE4中如何采集360度全景图片和VR视频

如何使用虚幻4来制作一个VR视频播放器呢,简单来讲,使用虚幻4的视频采集插件来获取图像,并对图像进行处理,就能获取我们需要的图像了,下一步,你可以把图像投影到一个360度球体上,就能形成球形的播放器了. 1.插件测试-采集单帧双眼图像 打开Epic Games Launcher,启动引擎(我使用的版本为4.14.0).在弹出的对话框中点击New Project标签栏,再选择C++标签页,选择Vehicle Advanced模板,并将项目命名为STEREOSCOPIC.最后点击CreateProj

使用 ThreeSixty 创建可拖动的 360 度全景图片预览效果

ThreeSixty 是生成可拖动的360度预览图像序列的 jQuery 插件.只需要在你的 HTML 页面包引入最新的 jQuery 和 threesixty.js 文件就可以使用了,支持键盘上的箭头键,也支持触摸和移动设备.可以使用 nextFrame() 和 prevFrame() 绑定 UI 控件. 官方网站     在线演示     插件下载 示例 HTML: 1 <div class="threesixty" data-path="assets/img/sr

怎么样拍摄360度全景?

360全景不是凭空生成的,要制作一个360全景,我们需要有原始的图像素材,原始图像素材的来源可以是: A.在现实的场景中,使用相机的全景拍摄功能得到的鱼眼图像 B.通过建模渲染得到的虚拟图像 下文中的表格对比了在不同的设备.拍摄机位.拼合模式.拍摄难度下所能获得到的鱼眼图像 要拍摄全景素材我们需要用到一些专业设备,如下: 数码单反相机 360全景拍摄硬件配备-数码单反相机 首先让我们来认识一下什么是数码单反相机.说白了,数码单反相机就是使用了单反新技术的数码相机.作为专业级的数码相机,用其拍摄出

政府展示360全景应用,虚拟馆360度展示解决方案

政府需求分析: 1.数字城市.360全景城市风采展示 2.园区规划,招商引资,打造城市和产业园区的电子名片 3.大力发展在线城市管理体系:城市应急系统.城管.消防.安全等电子系统 4.大型经济和文化招商会.博览会.运动会宣传展示 5.非物质文化遗产宣传展示 6.名胜古迹宣传展示,打造低碳绿色旅游产业 360全景的特点: 1.水平垂直各360全景,一共360度视角,没有任何视线盲点,想看哪里就看哪儿; 2.全部是实景拍摄,真实立体; 3.高清晰度,采用专业自改制高像素相机; 4.互动性强,鼠标随意

360度评价反馈有哪些使用场景?

作为支持组织管理及领导力发展的工具,360度评估反馈是组织人才管理战略的重要组成部分.它能够评估员工的优缺点,并作为培训或教练计划的出发点.因为360度评估反馈具有全面性,所以它能够有效区分出那些表现优秀的员工.刚刚符合期望的员工以及亟待发展的员工.当然,这些评估结果远不止帮助企业创造利润,影响员工的评定.培养以及留任:更能在员工的关键行为.能力和工作标准间建立一致性.从人才管理的业务出发,360度评估反馈在人才管理的多个方面发挥作用. 发展领导力360度评估反馈法在领导力发展的整个生命周期中有

360度 图片 旋转

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <title>CSS3鼠标悬停360度旋转效果 </title> <style> * { margin:0; padding:0; list-style:none; } body { background:#1F1F1F; } .zzsc { width

企业遇到什么问题有必要做360度评估?

许多人力资源从业者在推动360度评估项目是,希望能够找到一些更为量化的评估角度来考察360度项目推进的时机.可以试着参考以下指标,如果有三项以上符合你所在的组织的情况,就应该考虑是否引入360度评估反馈技术,以及该如何设计和实施360度评估反馈技术. 一年内出现过新晋管理者不够胜利,“提拔错了人”的情况: 管理者与员工之间.管理者之间关系紧张,频繁发生冲突: 管理者对提升自我并无动力,被动学习: 管理者成熟度偏低.长期无改善: 管理者不知道如何发展: 高潜员工抱怨企业对他们的关注不足: 培训需求

[JavaScript案例]360度全景照片

案例: 360度全景照片 鼠标在页面上滑动时图片表现的物体会随着移动方向进行旋转,从而呈现360度物体旋转效果 思路: 将所有的图片都放入指定容器内,通过切换相应的照片隐藏与显示来实现旋转效果 代码: <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta id="viewport" name="