HTML+CSS+JavaScript如何实现图片3D展览
这篇“HTML+CSS+JavaScript如何实现图片3D展览”除了程序员外大部分人都不太理解，今天小编为了让大家更加理解“HTML+CSS+JavaScript如何实现图片3D展览”，给大家总结了以下内容，具有一定借鉴价值，内容详细步骤清晰，细节处理妥当，希望大家通过这篇文章有所收获，下面让我们一起来看看具体内容吧。
Java是什么
Java是一门面向对象编程语言，可以编写桌面应用程序、Web应用程序、分布式系统和嵌入式系统应用程序。
一、图片3D展览效果
上传图片的大小有限制，录制的GIF图展示效果不是很好
二、代码实现
1. HTML代码
<!DOCTYPEHTML>
<html>
<head>
<metacharset="utf-8">
<metaname="viewport"content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
<metaname="HandheldFriendly"content="true">
<metaname="description"content="图片3D展览屋">
<metaname="keywords"content="canvas,3D_picture,perspective,texturing,gallery">
<linkhref="res/slider-wb.css"rel="stylesheet">
<title>图片3D展览屋</title>
<style>
html
{
overflow:visible;
-ms-touch-action:none;
-ms-content-zooming:none;
}
body
{
position:absolute;
margin:0px;
padding:0px;
background:#fff;
width:100%;
height:100%;
}
#canvas
{
position:absolute;
width:100%;
height:100%;
background:#fff;
}
</style>
<scripttype="text/javascript"src="res/ge1doot.js"></script>
<scripttype="text/javascript">
"usestrict";
(function(){
/*====definitions====*/
vardiapo=[],layers=[],ctx,pointer,scr,camera,light,fps=0,quality=[1,2],
//----polyconstructor----
Poly=function(parent,face){
this.parent=parent;
this.ctx=ctx;
this.color=face.fill||false;
this.points=[];
if(!face.img){
//----createpoints----
for(vari=0;i<4;i++){
this.points[i]=newge1doot.transform3D.Point(
parent.pc.x+(face.x[i]*parent.normalZ)+(face.z[i]*parent.normalX),
parent.pc.y+face.y[i],
parent.pc.z+(face.x[i]*parent.normalX)+(-face.z[i]*parent.normalZ)
);
}
this.points[3].next=false;
}
},
//----diapoconstructor----
Diapo=function(path,img,structure){
//----createimage----
this.img=newge1doot.transform3D.Image(
this,path+img.img,1,{
isLoaded:function(img){
img.parent.isLoaded=true;
img.parent.loaded(img);
}
}
);
this.visible=false;
this.normalX=img.nx;
this.normalZ=img.nz;
//----pointcenter----
this.pc=newge1doot.transform3D.Point(img.x,img.y,img.z);
//----targetpositions----
this.tx=img.x+(img.nx*Math.sqrt(camera.focalLength)*20);
this.tz=img.z-(img.nz*Math.sqrt(camera.focalLength)*20);
//----createpolygons----
this.poly=[];
for(vari=-1,p;p=structure[++i];){
layers[i]=(p.img===true?1:2);
this.poly.push(
newPoly(this,p)
);
}
},
//----initsection----
init=function(json){
//drawpolyprimitive
Poly.prototype.drawPoly=ge1doot.transform3D.drawPoly;
//----initscreen----
scr=newge1doot.Screen({
container:"canvas"
});
ctx=scr.ctx;
scr.resize();
//----initpointer----
pointer=newge1doot.Pointer({
tap:function(){
if(camera.over){
if(camera.over===camera.target.elem){
//----returntothecenter----
camera.target.x=0;
camera.target.z=0;
camera.target.elem=false;
}else{
//----gotodiapo----
camera.target.elem=camera.over;
camera.target.x=camera.over.tx;
camera.target.z=camera.over.tz;
//----adapttesselationleveltodistance----
for(vari=0,d;d=diapo[i++];){
vardx=camera.target.x-d.pc.x;
vardz=camera.target.z-d.pc.z;
vardist=Math.sqrt(dx*dx+dz*dz);
varlev=(dist>1500)?quality[0]:quality[1];
d.img.setLevel(lev);
}
}
}
}
});
//----initcamera----
camera=newge1doot.transform3D.Camera({
focalLength:Math.sqrt(scr.width)*10,
easeTranslation:0.025,
easeRotation:0.06,
disableRz:true
},{
move:function(){
this.over=false;
//----rotation----
if(pointer.isDraging){
this.target.elem=false;
this.target.ry=-pointer.Xi*0.01;
this.target.rx=(pointer.Y-scr.height*0.5)/(scr.height*0.5);
}else{
if(this.target.elem){
this.target.ry=Math.atan2(
this.target.elem.pc.x-this.x,
this.target.elem.pc.z-this.z
);
}
}
this.target.rx*=0.9;
}
});
camera.z=-10000;
camera.py=0;
//----createimages----
for(vari=0,img;img=json.imgdata[i++];){
diapo.push(
newDiapo(
json.options.imagesPath,
img,
json.structure
)
);
}
//----startengine---->>>
setInterval(function(){
quality=(fps>50)?[2,3]:[1,2];
fps=0;
},1000);
run();
},
//----mainloop----
run=function(){
//----clearscreen----
ctx.clearRect(0,0,scr.width,scr.height);
//----camera----
camera.move();
//----drawlayers----
for(vark=-1,l;l=layers[++k];){
light=false;
for(vari=0,d;d=diapo[i++];){
(l===1&&d.draw())||
(d.visible&&d.poly[k].draw());
}
}
//----cursor----
if(camera.over&&!pointer.isDraging){
scr.setCursor("pointer");
}else{
scr.setCursor("move");
}
//----loop----
fps++;
requestAnimFrame(run);
};
/*====prototypes====*/
Poly.prototype.draw=function(){
//----colorlight----
varc=this.color;
if(c.light||!light){
vars=c.light?this.parent.light:1;
//----rgbacolor----
light="rgba("+
Math.round(c.r*s)+","+
Math.round(c.g*s)+","+
Math.round(c.b*s)+","+(c.a||1)+")";
ctx.fillStyle=light;
}
//----paintpoly----
if(!c.light||this.parent.light<1){
//----projection----
for(
vari=0;
this.points[i++].projection();
);
this.drawPoly();
ctx.fill();
}
}
/*====imageonload====*/
Diapo.prototype.loaded=function(img){
//----createpoints----
vard=[-1,1,1,-1,1,1,-1,-1];
varw=img.texture.width*0.5;
varh=img.texture.height*0.5;
for(vari=0;i<4;i++){
img.points[i]=newge1doot.transform3D.Point(
this.pc.x+(w*this.normalZ*d[i]),
this.pc.y+(h*d[i+4]),
this.pc.z+(w*this.normalX*d[i])
);
}
}
/*====imagesdraw====*/
Diapo.prototype.draw=function(){
//----visibility----
this.pc.projection();
if(this.pc.Z>-(camera.focalLength>>1)&&this.img.transform3D(true)){
//----light----
this.light=0.5+Math.abs(this.normalZ*camera.cosY-this.normalX*camera.sinY)*0.6;
//----drawimage----
this.visible=true;
this.img.draw();
//----testpointerinside----
if(pointer.hasMoved||pointer.isDown){
if(
this.img.isPointerInside(
pointer.X,
pointer.Y
)
)camera.over=this;
}
}elsethis.visible=false;
returntrue;
}
return{
//---loaddata----
load:function(data){
window.addEventListener('load',function(){
ge1doot.loadJS(
"res/imageTransform3D.js",
init,data
);
},false);
}
}
})().load({
imgdata:[
//north
{img:'imgs/001.jpg',x:-1000,y:0,z:1500,nx:0,nz:1},
{img:'imgs/002.jpg',x:0,y:0,z:1500,nx:0,nz:1},
{img:'imgs/003.jpg',x:1000,y:0,z:1500,nx:0,nz:1},
//east
{img:'imgs/004.jpg',x:1500,y:0,z:1000,nx:-1,nz:0},
{img:'imgs/005.jpg',x:1500,y:0,z:0,nx:-1,nz:0},
{img:'imgs/006.jpg',x:1500,y:0,z:-1000,nx:-1,nz:0},
//south
{img:'imgs/007.jpg',x:1000,y:0,z:-1500,nx:0,nz:-1},
{img:'imgs/008.jpg',x:0,y:0,z:-1500,nx:0,nz:-1},
{img:'imgs/009.jpg',x:-1000,y:0,z:-1500,nx:0,nz:-1},
//west
{img:'imgs/010.jpg',x:-1500,y:0,z:-1000,nx:1,nz:0},
{img:'imgs/011.jpg',x:-1500,y:0,z:0,nx:1,nz:0},
{img:'imgs/012.jpg',x:-1500,y:0,z:1000,nx:1,nz:0}
],
structure:[
{
//wall
fill:{r:255,g:255,b:255,light:1},
x:[-1001,-490,-490,-1001],
z:[-500,-500,-500,-500],
y:[500,500,-500,-500]
},{
//wall
fill:{r:255,g:255,b:255,light:1},
x:[-501,2,2,-500],
z:[-500,-500,-500,-500],
y:[500,500,-500,-500]
},{
//wall
fill:{r:255,g:255,b:255,light:1},
x:[0,502,502,0],
z:[-500,-500,-500,-500],
y:[500,500,-500,-500]
},{
//wall
fill:{r:255,g:255,b:255,light:1},
x:[490,1002,1002,490],
z:[-500,-500,-500,-500],
y:[500,500,-500,-500]
},{
//shadow
fill:{r:0,g:0,b:0,a:0.2},
x:[-420,420,420,-420],
z:[-500,-500,-500,-500],
y:[150,150,-320,-320]
},{
//shadow
fill:{r:0,g:0,b:0,a:0.2},
x:[-20,20,20,-20],
z:[-500,-500,-500,-500],
y:[250,250,150,150]
},{
//shadow
fill:{r:0,g:0,b:0,a:0.2},
x:[-20,20,20,-20],
z:[-500,-500,-500,-500],
y:[-320,-320,-500,-500]
},{
//shadow
fill:{r:0,g:0,b:0,a:0.2},
x:[-20,20,10,-10],
z:[-500,-500,-100,-100],
y:[-500,-500,-500,-500]
},{
//base
fill:{r:32,g:32,b:32},
x:[-50,50,50,-50],
z:[-150,-150,-50,-50],
y:[-500,-500,-500,-500]
},{
//support
fill:{r:16,g:16,b:16},
x:[-10,10,10,-10],
z:[-100,-100,-100,-100],
y:[300,300,-500,-500]
},{
//frame
fill:{r:255,g:255,b:255},
x:[-320,-320,-320,-320],
z:[0,-20,-20,0],
y:[-190,-190,190,190]
},{
//frame
fill:{r:255,g:255,b:255},
x:[320,320,320,320],
z:[0,-20,-20,0],
y:[-190,-190,190,190]
},
{img:true},
{
//ceilingLight
fill:{r:255,g:128,b:0},
x:[-50,50,50,-50],
z:[450,450,550,550],
y:[500,500,500,500]
},{
//groundLight
fill:{r:255,g:128,b:0},
x:[-50,50,50,-50],
z:[450,450,550,550],
y:[-500,-500,-500,-500]
}
],
options:{
imagesPath:""
}
});
</script>
</head>
<body>
<ahref="https://blog.csdn.net/fyfugoyfa/article/details/108845194"target="_blank">CSDN文章</a><br/>
<canvasid="canvas">建议用谷歌浏览器打开</canvas>
</body>
</html>2. CSS代码
#icon{
background:rgb(255,144,0);border-radius:6px0px0px;transition:0.6sease-in-out;left:65px;top:6px;width:40px;height:40px;overflow:hidden;position:relative;cursor:pointer;-moz-transition:all0.6sease-in-out0s;-webkit-transition:all0.6sease-in-out0s;-o-transition:all0.6sease-in-out0s;
}
#icondiv{
background:none;position:absolute;
}
#icondiv:nth-child(1){
border-width:7px0px7px8px;border-style:solid;border-color:transparentrgb(255,255,255);left:20px;top:50%;width:0px;height:0px;margin-top:-7px;position:absolute;
}
#icondiv:nth-child(2){
background:rgb(255,255,255);left:12px;top:50%;width:8px;height:6px;margin-top:-3px;position:absolute;
}
#nav{
top:10px;width:100px;height:0px;position:absolute;-ms-user-select:none;-webkit-user-select:none;-moz-user-select:none;
}
#nav-switch{
display:none;
}
#nav.label{
display:block;cursor:pointer;
}
#nav.container{
transition:left0.3sease-in-out;left:-100px;width:100%;position:absolute;-moz-transition:left0.3sease-in-out0s;-webkit-transition:left0.3sease-in-out0s;-o-transition:left0.3sease-in-out0s;
}
#nav.container>div{
padding:0px;width:50%;float:left;
}
#nav.container.nav-on{
color:rgb(51,51,51);padding-left:0px;
}
#nav.container.nav-off{
width:40px;height:40px;padding-right:10px;
}
:checked#nav-switch+.label.container{
left:10px;
}
:checked#nav-switch+.label#icon{
background:rgb(0,101,203);border-radius:0px0px6px;transform:rotate(-180deg);-webkit-transform:rotate(-180deg);-moz-transform:rotate(-180deg);-o-transform:rotate(-180deg);
}
.title{
margin:0px;padding:0px;left:170px;top:2px;height:40px;color:rgb(51,51,51);line-height:40px;font-family:"SegoeUILight","SegoeUI",Frutiger,"FrutigerLinotype","DejavuSans","HelveticaNeue",Arial,sans-serif;font-size:24px;font-weight:bold;white-space:nowrap;position:absolute;-ms-user-select:none;-webkit-user-select:none;-moz-user-select:none;-o-user-select:none;user-select:none;
}
.menu{
margin:0px;padding:0px;left:0px;top:6px;color:rgb(51,51,51);font-family:"SegoeUILight","SegoeUI",Frutiger,"FrutigerLinotype","DejavuSans","HelveticaNeue",Arial,sans-serif;font-size:1em;font-weight:lighter;list-style-type:none;position:relative;cursor:pointer;
}
.menuli{
list-style:none;width:100px;height:40px;border-right-color:rgb(221,221,221);border-right-width:1px;border-right-style:solid;position:relative;cursor:pointer;
}
.menua{
color:rgb(51,51,51);line-height:40px;padding-left:40px;text-decoration:none;display:block;position:relative;
}
.menulia:hover{
background:rgb(255,144,0);
}
.menulia:focus{
background:rgb(255,144,0);
}
.menulia:active{
background:rgb(255,144,0);
}
#navli::before{
top:50%;margin-left:10px;position:absolute;content:"";
}
#navli::after{
top:50%;margin-left:10px;position:absolute;content:"";
}
#navlia::before{
top:50%;margin-left:10px;position:absolute;content:"";
}
#navlia::after{
top:50%;margin-left:10px;position:absolute;content:"";
}
#nav.homea::before{
border-width:8px7px;border-style:solid;border-color:transparenttransparentrgb(51,51,51);left:2px;margin-top:-16px;
}
#nav.homea::after{
border-width:3px4px0px;border-style:solid;border-color:rgb(51,51,51)rgb(51,51,51)transparent;left:4px;width:2px;height:4px;margin-top:0px;
}
#nav.arrowa::before{
border-width:7px0px7px8px;border-style:solid;border-color:transparentrgb(51,51,51);left:8px;margin-top:-7px;
}
#nav.arrowa::after{
background:rgb(51,51,51);left:0px;width:8px;height:6px;margin-top:-3px;
}
#nav.back.arrowa::before{
border-width:7px8px7px0px;left:0px;
}
#nav.back.arrowa::after{
left:8px;
}
#nav.lista::before{
background:none;border-width:6px0px;border-style:double;border-color:rgb(51,51,51);left:5px;top:14px;width:12px;height:2px;
}
#nav.lista::after{
background:none;border-width:6px0px;border-style:double;border-color:rgb(51,51,51);left:1px;top:14px;width:2px;height:2px;
}3. JavaScript代码
//=====ge1dootglobal=====js文件1
varge1doot=ge1doot||{
json:null,
screen:null,
pointer:null,
camera:null,
loadJS:function(url,callback,data){
if(typeofurl=="string")url=[url];
varload=function(src){
varscript=document.createElement("script");
if(callback){
if(script.readyState){
script.onreadystatechange=function(){
if(script.readyState=="loaded"||script.readyState=="complete"){
script.onreadystatechange=null;
if(--n===0)callback(data||false);
}
}
}else{
script.onload=function(){
if(--n===0)callback(data||false);
}
}
}
script.src=src;
document.getElementsByTagName("head")[0].appendChild(script);
}
for(vari=0,n=url.length;i<n;i++)load(url[i]);
}
}
//=====html/canvascontainer=====
ge1doot.Screen=function(setup){
ge1doot.screen=this;
this.elem=document.getElementById(setup.container)||setup.container;
this.ctx=this.elem.tagName=="CANVAS"?this.elem.getContext("2d"):false;
this.style=this.elem.style;
this.left=0;
this.top=0;
this.width=0;
this.height=0;
this.cursor="default";
this.setup=setup;
this.resize=function(){
varo=this.elem;
this.width=o.offsetWidth;
this.height=o.offsetHeight;
for(this.left=0,this.top=0;o!=null;o=o.offsetParent){
this.left+=o.offsetLeft;
this.top+=o.offsetTop;
}
if(this.ctx){
this.elem.width=this.width;
this.elem.height=this.height;
}
this.setup.resize&&this.setup.resize();
}
this.setCursor=function(type){
if(type!==this.cursor&&'ontouchstart'inwindow===false){
this.cursor=type;
this.style.cursor=type;
}
}
window.addEventListener('resize',function(){
ge1doot.screen.resize();
},false);
!this.setup.resize&&this.resize();
}
//====unifiedtoucheventshandler====
ge1doot.Pointer=function(setup){
ge1doot.pointer=this;
varself=this;
varbody=document.body;
varhtml=document.documentElement;
this.setup=setup;
this.screen=ge1doot.screen;
this.elem=this.screen.elem;
this.X=0;
this.Y=0;
this.Xi=0;
this.Yi=0;
this.bXi=0;
this.bYi=0;
this.Xr=0;
this.Yr=0;
this.startX=0;
this.startY=0;
this.scale=0;
this.wheelDelta=0;
this.isDraging=false;
this.hasMoved=false;
this.isDown=false;
this.evt=false;
varsX=0;
varsY=0;
//preventdefaultbehavior
if(setup.tap)this.elem.onclick=function(){returnfalse;}
if(!setup.documentMove){
document.ontouchmove=function(e){e.preventDefault();}
}
document.addEventListener("MSHoldVisual",function(e){e.preventDefault();},false);
if(typeofthis.elem.style.msTouchAction!='undefined')this.elem.style.msTouchAction="none";
this.pointerDown=function(e){
if(!this.isDown){
if(this.elem.setCapture)this.elem.setCapture();
this.isDraging=false;
this.hasMoved=false;
this.isDown=true;
this.evt=e;
this.Xr=(e.clientX!==undefined?e.clientX:e.touches[0].clientX);
this.Yr=(e.clientY!==undefined?e.clientY:e.touches[0].clientY);
this.X=sX=this.Xr-this.screen.left;
this.Y=sY=this.Yr-this.screen.top+((html&&html.scrollTop)||body.scrollTop);
this.setup.down&&this.setup.down(e);
}
}
this.pointerMove=function(e){
this.Xr=(e.clientX!==undefined?e.clientX:e.touches[0].clientX);
this.Yr=(e.clientY!==undefined?e.clientY:e.touches[0].clientY);
this.X=this.Xr-this.screen.left;
this.Y=this.Yr-this.screen.top+((html&&html.scrollTop)||body.scrollTop);
if(this.isDown){
this.Xi=this.bXi+(this.X-sX);
this.Yi=this.bYi-(this.Y-sY);
}
if(Math.abs(this.X-sX)>11||Math.abs(this.Y-sY)>11){
this.hasMoved=true;
if(this.isDown){
if(!this.isDraging){
this.startX=sX;
this.startY=sY;
this.setup.startDrag&&this.setup.startDrag(e);
this.isDraging=true;
}else{
this.setup.drag&&this.setup.drag(e);
}
}else{
sX=this.X;
sY=this.Y;
}
}
this.setup.move&&this.setup.move(e);
}
this.pointerUp=function(e){
this.bXi=this.Xi;
this.bYi=this.Yi;
if(!this.hasMoved){
this.X=sX;
this.Y=sY;
this.setup.tap&&this.setup.tap(this.evt);
}else{
this.setup.up&&this.setup.up(this.evt);
}
this.isDraging=false;
this.isDown=false;
this.hasMoved=false;
this.setup.up&&this.setup.up(this.evt);
if(this.elem.releaseCapture)this.elem.releaseCapture();
this.evt=false;
}
this.pointerCancel=function(e){
if(this.elem.releaseCapture)this.elem.releaseCapture();
this.isDraging=false;
this.hasMoved=false;
this.isDown=false;
this.bXi=this.Xi;
this.bYi=this.Yi;
sX=0;
sY=0;
}
if('ontouchstart'inwindow){
this.elem.ontouchstart=function(e){self.pointerDown(e);returnfalse;}
this.elem.ontouchmove=function(e){self.pointerMove(e);returnfalse;}
this.elem.ontouchend=function(e){self.pointerUp(e);returnfalse;}
this.elem.ontouchcancel=function(e){self.pointerCancel(e);returnfalse;}
}
document.addEventListener("mousedown",function(e){
if(
e.target===self.elem||
(e.target.parentNode&&e.target.parentNode===self.elem)||
(e.target.parentNode.parentNode&&e.target.parentNode.parentNode===self.elem)
){
if(typeofe.stopPropagation!="undefined"){
e.stopPropagation();
}else{
e.cancelBubble=true;
}
e.preventDefault();
self.pointerDown(e);
}
},false);
document.addEventListener("mousemove",function(e){self.pointerMove(e);},false);
document.addEventListener("mouseup",function(e){
self.pointerUp(e);
},false);
document.addEventListener('gesturechange',function(e){
e.preventDefault();
if(e.scale>1)self.scale=0.1;elseif(e.scale<1)self.scale=-0.1;elseself.scale=0;
self.setup.scale&&self.setup.scale(e);
returnfalse;
},false);
if(window.navigator.msPointerEnabled){
varnContact=0;
varmyGesture=newMSGesture();
myGesture.target=this.elem;
this.elem.addEventListener("MSPointerDown",function(e){
if(e.pointerType==e.MSPOINTER_TYPE_TOUCH){
myGesture.addPointer(e.pointerId);
nContact++;
}
},false);
this.elem.addEventListener("MSPointerOut",function(e){
if(e.pointerType==e.MSPOINTER_TYPE_TOUCH){
nContact--;
}
},false);
this.elem.addEventListener("MSGestureHold",function(e){
e.preventDefault();
},false);
this.elem.addEventListener("MSGestureChange",function(e){
if(nContact>1){
if(e.preventDefault)e.preventDefault();
self.scale=e.velocityExpansion;
self.setup.scale&&self.setup.scale(e);
}
returnfalse;
},false);
}
if(window.addEventListener)this.elem.addEventListener('DOMMouseScroll',function(e){
if(e.preventDefault)e.preventDefault();
self.wheelDelta=e.detail*10;
self.setup.wheel&&self.setup.wheel(e);
returnfalse;
},false);
this.elem.onmousewheel=function(){
self.wheelDelta=-event.wheelDelta*.25;
self.setup.wheel&&self.setup.wheel(event);
returnfalse;
}
}
//=====requestanimationframe=====
window.requestAnimFrame=(function(){
returnwindow.requestAnimationFrame||
window.webkitRequestAnimationFrame||
window.mozRequestAnimationFrame||
window.oRequestAnimationFrame||
window.msRequestAnimationFrame||
function(run){
window.setTimeout(run,16);
};
})();//=====ge1dootglobal=====js文件1
varge1doot=ge1doot||{
json:null,
screen:null,
pointer:null,
camera:null,
loadJS:function(url,callback,data){
if(typeofurl=="string")url=[url];
varload=function(src){
varscript=document.createElement("script");
if(callback){
if(script.readyState){
script.onreadystatechange=function(){
if(script.readyState=="loaded"||script.readyState=="complete"){
script.onreadystatechange=null;
if(--n===0)callback(data||false);
}
}
}else{
script.onload=function(){
if(--n===0)callback(data||false);
}
}
}
script.src=src;
document.getElementsByTagName("head")[0].appendChild(script);
}
for(vari=0,n=url.length;i<n;i++)load(url[i]);
}
}
//=====html/canvascontainer=====
ge1doot.Screen=function(setup){
ge1doot.screen=this;
this.elem=document.getElementById(setup.container)||setup.container;
this.ctx=this.elem.tagName=="CANVAS"?this.elem.getContext("2d"):false;
this.style=this.elem.style;
this.left=0;
this.top=0;
this.width=0;
this.height=0;
this.cursor="default";
this.setup=setup;
this.resize=function(){
varo=this.elem;
this.width=o.offsetWidth;
this.height=o.offsetHeight;
for(this.left=0,this.top=0;o!=null;o=o.offsetParent){
this.left+=o.offsetLeft;
this.top+=o.offsetTop;
}
if(this.ctx){
this.elem.width=this.width;
this.elem.height=this.height;
}
this.setup.resize&&this.setup.resize();
}
this.setCursor=function(type){
if(type!==this.cursor&&'ontouchstart'inwindow===false){
this.cursor=type;
this.style.cursor=type;
}
}
window.addEventListener('resize',function(){
ge1doot.screen.resize();
},false);
!this.setup.resize&&this.resize();
}
//====unifiedtoucheventshandler====
ge1doot.Pointer=function(setup){
ge1doot.pointer=this;
varself=this;
varbody=document.body;
varhtml=document.documentElement;
this.setup=setup;
this.screen=ge1doot.screen;
this.elem=this.screen.elem;
this.X=0;
this.Y=0;
this.Xi=0;
this.Yi=0;
this.bXi=0;
this.bYi=0;
this.Xr=0;
this.Yr=0;
this.startX=0;
this.startY=0;
this.scale=0;
this.wheelDelta=0;
this.isDraging=false;
this.hasMoved=false;
this.isDown=false;
this.evt=false;
varsX=0;
varsY=0;
//preventdefaultbehavior
if(setup.tap)this.elem.onclick=function(){returnfalse;}
if(!setup.documentMove){
document.ontouchmove=function(e){e.preventDefault();}
}
document.addEventListener("MSHoldVisual",function(e){e.preventDefault();},false);
if(typeofthis.elem.style.msTouchAction!='undefined')this.elem.style.msTouchAction="none";
this.pointerDown=function(e){
if(!this.isDown){
if(this.elem.setCapture)this.elem.setCapture();
this.isDraging=false;
this.hasMoved=false;
this.isDown=true;
this.evt=e;
this.Xr=(e.clientX!==undefined?e.clientX:e.touches[0].clientX);
this.Yr=(e.clientY!==undefined?e.clientY:e.touches[0].clientY);
this.X=sX=this.Xr-this.screen.left;
this.Y=sY=this.Yr-this.screen.top+((html&&html.scrollTop)||body.scrollTop);
this.setup.down&&this.setup.down(e);
}
}
this.pointerMove=function(e){
this.Xr=(e.clientX!==undefined?e.clientX:e.touches[0].clientX);
this.Yr=(e.clientY!==undefined?e.clientY:e.touches[0].clientY);
this.X=this.Xr-this.screen.left;
this.Y=this.Yr-this.screen.top+((html&&html.scrollTop)||body.scrollTop);
if(this.isDown){
this.Xi=this.bXi+(this.X-sX);
this.Yi=this.bYi-(this.Y-sY);
}
if(Math.abs(this.X-sX)>11||Math.abs(this.Y-sY)>11){
this.hasMoved=true;
if(this.isDown){
if(!this.isDraging){
this.startX=sX;
this.startY=sY;
this.setup.startDrag&&this.setup.startDrag(e);
this.isDraging=true;
}else{
this.setup.drag&&this.setup.drag(e);
}
}else{
sX=this.X;
sY=this.Y;
}
}
this.setup.move&&this.setup.move(e);
}
this.pointerUp=function(e){
this.bXi=this.Xi;
this.bYi=this.Yi;
if(!this.hasMoved){
this.X=sX;
this.Y=sY;
this.setup.tap&&this.setup.tap(this.evt);
}else{
this.setup.up&&this.setup.up(this.evt);
}
this.isDraging=false;
this.isDown=false;
this.hasMoved=false;
this.setup.up&&this.setup.up(this.evt);
if(this.elem.releaseCapture)this.elem.releaseCapture();
this.evt=false;
}
this.pointerCancel=function(e){
if(this.elem.releaseCapture)this.elem.releaseCapture();
this.isDraging=false;
this.hasMoved=false;
this.isDown=false;
this.bXi=this.Xi;
this.bYi=this.Yi;
sX=0;
sY=0;
}
if('ontouchstart'inwindow){
this.elem.ontouchstart=function(e){self.pointerDown(e);returnfalse;}
this.elem.ontouchmove=function(e){self.pointerMove(e);returnfalse;}
this.elem.ontouchend=function(e){self.pointerUp(e);returnfalse;}
this.elem.ontouchcancel=function(e){self.pointerCancel(e);returnfalse;}
}
document.addEventListener("mousedown",function(e){
if(
e.target===self.elem||
(e.target.parentNode&&e.target.parentNode===self.elem)||
(e.target.parentNode.parentNode&&e.target.parentNode.parentNode===self.elem)
){
if(typeofe.stopPropagation!="undefined"){
e.stopPropagation();
}else{
e.cancelBubble=true;
}
e.preventDefault();
self.pointerDown(e);
}
},false);
document.addEventListener("mousemove",function(e){self.pointerMove(e);},false);
document.addEventListener("mouseup",function(e){
self.pointerUp(e);
},false);
document.addEventListener('gesturechange',function(e){
e.preventDefault();
if(e.scale>1)self.scale=0.1;elseif(e.scale<1)self.scale=-0.1;elseself.scale=0;
self.setup.scale&&self.setup.scale(e);
returnfalse;
},false);
if(window.navigator.msPointerEnabled){
varnContact=0;
varmyGesture=newMSGesture();
myGesture.target=this.elem;
this.elem.addEventListener("MSPointerDown",function(e){
if(e.pointerType==e.MSPOINTER_TYPE_TOUCH){
myGesture.addPointer(e.pointerId);
nContact++;
}
},false);
this.elem.addEventListener("MSPointerOut",function(e){
if(e.pointerType==e.MSPOINTER_TYPE_TOUCH){
nContact--;
}
},false);
this.elem.addEventListener("MSGestureHold",function(e){
e.preventDefault();
},false);
this.elem.addEventListener("MSGestureChange",function(e){
if(nContact>1){
if(e.preventDefault)e.preventDefault();
self.scale=e.velocityExpansion;
self.setup.scale&&self.setup.scale(e);
}
returnfalse;
},false);
}
if(window.addEventListener)this.elem.addEventListener('DOMMouseScroll',function(e){
if(e.preventDefault)e.preventDefault();
self.wheelDelta=e.detail*10;
self.setup.wheel&&self.setup.wheel(e);
returnfalse;
},false);
this.elem.onmousewheel=function(){
self.wheelDelta=-event.wheelDelta*.25;
self.setup.wheel&&self.setup.wheel(event);
returnfalse;
}
}
//=====requestanimationframe=====
window.requestAnimFrame=(function(){
returnwindow.requestAnimationFrame||
window.webkitRequestAnimationFrame||
window.mozRequestAnimationFrame||
window.oRequestAnimationFrame||
window.msRequestAnimationFrame||
function(run){
window.setTimeout(run,16);
};
})();感谢你的阅读，希望你对“HTML+CSS+JavaScript如何实现图片3D展览”这一关键问题有了一定的理解，具体使用情况还需要大家自己动手实验使用过才能领会，快去试试吧，如果想阅读更多相关知识点的文章，欢迎关注恰卡编程网行业资讯频道！
目录
推荐阅读
0 条评论
本站已关闭游客评论，请登录或者注册后再评论吧~