前端开发javascript360度全景图片【效果】

前端vr全景开发是什么|javascript前端开发|javascript前端开发实用技术教程|web前端开发

html 代码

<!DOCTYPE html>
<html lang=”en”>
<head>
<metacharset=”UTF-8″>
<metaname=”viewport” content=”width=device-width, initial-scale=1.0″>
<metahttp-equiv=”X-UA-Compatible” content=”ie=edge”>
<title>前端与移动开发 javascript</title>
</head>
<body>
<divid=”container”>
<div>
<imgsrc=”http://www.thepetedesign.com/demos/panorama_viewer/demo_photo.jpg” />
</div>
</div>
<style>
#container{
overflow:hidden;
position:relative;
}
#containerdiv{
transition:all700mslinear;
}
#containerdiv:hover{
cursor:move;
}
img{
display:none;
}
</style>
<script type=”text/javascript”>
vardiv=container.querySelector(‘div’);
varimg=container.querySelector(‘img’);
img.onload=function(){
div.style.background =”url(“+img.src+”) repeat”;
div.style.width =img.width +’px’;
div.style.height =img.height +’px’;
};
varmoving=false;
varposition=0;
varstart=0;
varmove=function(e){
if (!moving) return;
vardistance=e.clientX-start;
this.style.backgroundPosition=position+distance+’px ‘+’0px’;
};
vardown=function(e){
start=e.clientX;
moving=true;
};
varup=function(e){
position+=e.clientX-start;
moving=false;
};
div.addEventListener(‘mousemove’,move,false);
div.addEventListener(‘mousedown’,down,false);
div.addEventListener(‘mouseup’,up,false);
</script>
</body>
</html>

类似的插件:JQuery Panorama Viewer

前端vr全景开发是什么|javascript前端开发|javascript前端开发实用技术教程|网站前端开发

https://www.rokub.com

» 本文来自:前端开发者 » 《前端开发javascript360度全景图片【效果】》
» 本文链接地址:https://www.rokub.com/3414.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!