JS 3d实现 - 走看看

zoukankan html css js c++ java

JS 3d实现

<html> <head> <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.min.js"></script><style> .s_c{ position:relative; 800px; height:300px; border:1px solid #000; overflow:hidden; } </style> <script type="text/javascript"> var Sl=Sl||{}; (function(){ var undefined; function box(o){ var d=$.extend({},{ 'w':40, 'h':30, 'secne':null, 'data':'' },o); if(d.secne==null||!d.secne) return; this.div=$("<div></div>").css({'position': 'absolute','border':'1px solid #cde','left':'0px','top':'0px'}).html(d.data); this.w(d.w); this.h(d.h); this._ow=this.w(); this._oh=this.h(); $(d.secne).append(this.div); return this; } box.prototype.zoomw=function(v){ if(v==undefined){ this._zw=this._zw||1; return this._zw; } this.w(this.ow()*v,false); this._zw=v; return this; } box.prototype.zoomh=function(v){ if(v==undefined){ this._zh==this._zh||1; return this._zh; } this.h(this.oh()*v,false); this._zh=v; return this; } box.prototype.x=function(x){ if(x==undefined){ this._x=this._x||0; return this._x; } this.div.css({ left:x-(this.w())/2 }) this._x=x; return this; } box.prototype.y=function(y){ if(y==undefined){ this._y=this._y||0; return this._y; } this.div.css({ top:y-(this.h())/2 }) this._y=y; return this; } box.prototype.ow=function(){ return this._ow||0; } box.prototype.oh=function(){ return this._oh||0; } box.prototype.w=function(w,rs){ if(w==undefined){ w=this.div.css('width'); w=w=='auto'?this.div.width():w; return parseInt(w); } if(rs!==false) this._ow=w; this.mx(-(w-this.w())/2); this.div.css({'width':w}); return this; } box.prototype.h=function(h,rs){ if(h==undefined){ h=this.div.css('height'); h=h=='auto'?this.div.height():h; return parseInt(h); } if(rs!==false) this._oh=h; this.my(-(h-this.h())/2); this.div.css({'height':h}); return this; } box.prototype.mx=function(x){ var div=this.div; div.css({'left': parseInt(div.css('left'))+x}); } box.prototype.my=function(y){ var div=this.div; div.css({'top':parseInt(div.css('top'))+y}); } box.prototype.z=function(z){ if(z==undefined) return this.div.css('z-index'); this.div.css("z-index",z); return this; } //3d box function box3d(o){ if(!$(o.secne))return; secne=o.secne; var secne=this.secne=$(secne); this.vx= parseInt(secne.css('width')=='auto'?secne.width():secne.css('width'))/2; this.vy= parseInt(secne.css('height')=='auto'?secne.height():secne.css('height'))/2; this.fl=o.fl||250; this.box=new box(o).z(0); this._set3d(); return this; } box3d.prototype.x=function(x){ if(x==undefined) return this._x||0; this._x=x||0; this._set3d(); return this; } box3d.prototype.y=function(y){ if(y==undefined) return this._y||0; this._y=y||0; this._set3d(); return this; } box3d.prototype.z=function(z){ if(z==undefined) return this._z||0; this._z=z||0; this._set3d(); return this; } box3d.prototype._set3d=function(){ var boxo=this.box; var fl=this.fl; var zomx=fl/(fl+this.z()); var x=this.vx+zomx*this.x(); var y=this.vy+zomx*this.y(); boxo.zoomw(zomx).zoomh(zomx); boxo.x(x); boxo.y(y); } // function slide(o){ var d=$.extend({},{ 'z':100, 'secne':null },o); if(d.secne==null||!$(d.secne))return; this.cecne=d.secne; this.z=d.z; this.sleep=0.02; var k={'secne':d.secne,'w':80,'h':50,fl:1000}; this.box=[]; var c=8; for(var i=0;i<c;i++){ var t= parseInt(i-c/2); var a=$('<div></div>').css({ '100%', height:'100%', background:'#777' }) k.data=a; var ubox=new box3d(k).z(300); this.r(ubox,t/2); this.box.push(ubox); } this.re_index(); } slide.prototype._moveaction=function(){ var _this=this; var s=this.sleep; for(var i=0;i<this.box.length;i++){ this.r(this.box[i],s); } this.re_index(); } slide.prototype.r=function(rbox,s){ if(!(rbox instanceof box3d)) return; var X=rbox.x(); var Y=rbox.y() var Z=rbox.z(); var New_X = X*Math.cos(s) - Z*Math.sin(s); var New_Z = X*Math.sin(s) + Z*Math.cos(s); var New_Y = Y; rbox.x(New_X); rbox.y(New_Y); rbox.z(New_Z); } slide.prototype.re_index=function(){ var arr=this.box; var s=arr.length; for(var j=0;j<s-1;j++){ for(var i=0;i<s-j-1;i++){ if(arr[i].z()<arr[i+1].z()){ var c=arr[i]; arr[i]=arr[i+1]; arr[i+1]=c; } } } for(var i=0;i<arr.length;i++){ arr[i].box.z(i) } } slide.prototype.start=function(){ this.run=1; this._move(); } slide.prototype.stop=function(){ this.run=0; } slide.prototype._move=function(s){ var _this=this; setTimeout(function(){ if(!_this.run){ return; } _this._moveaction(); _this._move(); },50) } Sl.slide=slide; })() $(function(){ var s=new Sl.slide({secne:'.s_c'}); $('#start').click(function(){s.start()}) $('#stop').click(function(){s.stop()}) }) </script></head> <body> <div class='s_c'></div> <button id="start">start</button> <button id="stop">stop</button> </body> </html>

查看全文

相关阅读:
Android开发使用Glide获取图片背景色淡绿色解决办法
 Android 获取 View 宽高的常用正确方式，避免为零
 Android之自定义View来接收输入法输入的内容
 FileProvider使用详解（拍照、安装APP、共享文件）
简明 homebrew
更优雅地使用命令行
 一篇长文说 git 基础
 chrome 浏览器的使用技巧
 前端学命令行
 cocos 碰撞系统

原文地址：https://www.cnblogs.com/liushannet/p/1987402.html