前端开发者前端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前端开发实用技术教程|网站前端开发
970106_lzh 2年前 (2021-01-08)说：
huihui 3年前 (2020-10-20)说：
Satisfy 3年前 (2020-06-05)说：
评论前必须登录！
注册