3D立体跟随鼠标旋转的球
工具/原料
adobedreamweaver
方法/步骤
1、准备好需要用到的图标。
2、新建html文档。
3、新建html文档。<divid="tt"></div><divid="screen"></div><divid="bankImages"><imgalt=""src="images/laia.png"></div>
4、书写css代码跷孳岔养。<style>html{overflow:hidden;-ms-t泠贾高框ouch-action:none;-ms-content-zooming:none;}body{position:absolute;margin:0px;padding:0px;background:#fff;width:100%;height:100%;}#screen{position:absolute;left:10%;top:10%;width:80%;height:80%;background:#fff;-webkit-touch-callout:none;}#screenimg{position:absolute;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;}#bankImages{visibility:hidden;}</style>
5、书写并添加js蜣贺鱿柢代码。<script>"usestrict";(function(){ varEase=function()惺绅寨瞀{ this.target=0; this.position=0; } Ease.prototype.move=function(target,speed){ this.position+=(target-this.position)*speed; } varscr,pointer,mouseZ,over,zoom, buffer=[], angle={ x:newEase(), y:newEase() }, camera={ x:newEase(), y:newEase(), focalLength:500 }, create3DHTML=function(i,x,y,z){ varimg=document.createElement('img'); img.src=i.src; scr.elem.appendChild(img); varElem=function(img,x,y){ this.img=img; this.img.parent=this; this.point3D={ x:x, y:y, z:newEase(), w:img.width*zoom, h:img.height*zoom }; this.next=true; } Elem.prototype.animate=function(){ varx=this.point3D.x-camera.x.position; vary=this.point3D.y-camera.y.position; this.point3D.z.move(this.point3D.z.target,this.point3D.z.target?.15:.08); varxy=angle.cx*y-angle.sx*this.point3D.z.position; varxz=angle.sx*y+angle.cx*this.point3D.z.position; varyz=angle.cy*xz-angle.sy*x; varyx=angle.sy*xz+angle.cy*x; varscale=camera.focalLength/(camera.focalLength+yz); x=yx*scale; y=xy*scale; varw=Math.round(Math.max(0,this.point3D.w*scale*0.5)); varh=Math.round(Math.max(0,this.point3D.h*scale*0.5)); varo=this.img.style; o.left=Math.round(x+scr.width*0.5-w*.5)+'px'; o.top=Math.round(y+scr.height*0.5-h*.5)+'px'; o.width=w+'px'; o.height=h+'px'; o.zIndex=1000+Math.round(scale*100); returnthis.next; } varobj=newElem(img,x,y); obj.point3D.z.target=z; buffer.push(obj); }, selectElem=function(){ varelement=document.elementFromPoint(pointer.Xr,pointer.Yr); if(element.parent&&element.parent!==over){ element.parent.point3D.z.target=mouseZ; camera.x.target=element.parent.point3D.x; camera.y.target=element.parent.point3D.y; if(over)over.point3D.z.target=0; over=element.parent; } }, init=function(FL,mZ,rx,ry){ scr=newge1doot.Screen({ container:"screen" }); pointer=newge1doot.Pointer({ tap:function(){ selectElem(); }, move:function(){ selectElem(); } }); varimg=document.getElementById('bankImages').getElementsByTagName('img'); zoom=Math.max(scr.width,scr.height)/1000; for(vari=-300;i<=300;i+=120){ for(varj=-300;j<=300;j+=120){ create3DHTML( img[0], i*zoom, j*zoom, 0 ); } } buffer[buffer.length-1].next=false; mouseZ=mZ*zoom; camera.focalLength=FL; angle.rx=rx/zoom; angle.ry=ry/zoom; pointer.Y=scr.height*0.5; pointer.X=scr.width*0.5; run(); }, run=function(){ angle.x.move(-(pointer.Y-scr.height*0.5)*angle.rx,.1); angle.y.move((pointer.X-scr.width*0.5)*angle.ry,.1); camera.x.move(camera.x.target,.025); camera.y.move(camera.y.target,.025); angle.cx=Math.cos(angle.x.position); angle.cy=Math.cos(angle.y.position); angle.sx=Math.sin(angle.x.position); angle.sy=Math.sin(angle.y.position); for( vari=0; buffer[i++].animate(); ); requestAnimFrame(run); }return{ load:function(){ window.addEventListener('load',function(){ init(350,-200,.005,.0025); },false); } }})().load();</script>
6、代码整体结构。
7、查看效果。
