<div class="codetitle"> <span><a style="CURSOR: pointer" data="2508" class="copybut" id="copybut2508" onclick="doCopy('code2508')"><u>コードをコピー</u></a></span> コードは次のとおりです:</div> <div class="codebody" id="code2508"> <br><html> <br><head> <br><script type="text/javascript" src="http://demo.jb51.net/jslib/jquery/jquery-1.4.2.min.js"></script><style> <br>.s_c{ <br>position:relative; <br>width:800px; <br>height:300px; <br>border:1px solid #000; <br>overflow:hidden; <br>} <br></style> <br><script type="text/javascript"> <br>var Sl=Sl||{}; <br>(function(){ <br>var undefined; <br>function box(o){ <br>var d=$.extend({},{ <br>'w':40, <br>'h':30, <br>'secne':null, <br>'data':'' <br>},o); <br>if(d.secne==null||!d.secne) return; <br>this.div=$("<div></div>").css({'position': 'absolute','border':'1px solid #cde','left':'0px','top':'0px'}).html(d.data); <br>this.w(d.w); <br>this.h(d.h); <br>this._ow=this.w(); <br>this._oh=this.h(); <br>$(d.secne).append(this.div); <br>return this; <br>} <br>box.prototype.zoomw=function(v){ <br>if(v==undefined){ <br>this._zw=this._zw||1; <br>return this._zw; <br>} <br>this.w(this.ow()*v,false); <br>this._zw=v; <br>return this; <br>} <br>box.prototype.zoomh=function(v){ <br>if(v==undefined){ <br>this._zh==this._zh||1; <br>return this._zh; <br>} <br>this.h(this.oh()*v,false); <br>this._zh=v; <br>return this; <br>} <br>box.prototype.x=function(x){ <br>if(x==undefined){ <br>this._x=this._x||0; <br>return this._x; <br>} <br>this.div.css({ <br>left:x-(this.w())/2 <br>}) <br>this._x=x; <br>return this; <br>} <br>box.prototype.y=function(y){ <br>if(y==undefined){ <br>this._y=this._y||0; <br>return this._y; <br>} <br>this.div.css({ <br>top:y-(this.h())/2 <br>}) <br>this._y=y; <br>return this; <br>} <br>box.prototype.ow=function(){ <br>return this._ow||0; <br>} <br>box.prototype.oh=function(){ <br>return this._oh||0; <br>} <br>box.prototype.w=function(w,rs){ <br>if(w==undefined){ <br>w=this.div.css('width'); <br>w=w=='auto'?this.div.width():w; <br>return parseInt(w); <br>} <br>if(rs!==false) <br>this._ow=w; <br>this.mx(-(w-this.w())/2); <br>this.div.css({'width':w}); <br>return this; <br>} <br>box.prototype.h=function(h,rs){ <br>if(h==undefined){ <br>h=this.div.css('height'); <br>h=h=='auto'?this.div.height():h; <br>return parseInt(h); <br>} <br>if(rs!==false) <br>this._oh=h; <br>this.my(-(h-this.h())/2); <br>this.div.css({'height':h}); <br>return this; <br>} <br>box.prototype.mx=function(x){ <br>var div=this.div; <br>div.css({'left': parseInt(div.css('left'))+x}); <br>} <br>box.prototype.my=function(y){ <br>var div=this.div; <br>div.css({'top':parseInt(div.css('top'))+y}); <br>} <br>box.prototype.z=function(z){ <br>if(z==undefined) <br>return this.div.css('z-index'); <br>this.div.css("z-index",z); <br>return this; <br>} <br><br><br><br>//3d box <br>function box3d(o){ <br>if(!$(o.secne))return; <br>secne=o.secne; <br>var secne=this.secne=$(secne); <br>this.vx= parseInt(secne.css('width')=='auto'?secne.width():secne.css('width'))/2; <br>this.vy= parseInt(secne.css('height')=='auto'?secne.height():secne.css('height'))/2; <br>this.fl=o.fl||250; <br>this.box=new box(o).z(0); <br>this._set3d(); <br>return this; <br>} <br>box3d.prototype.x=function(x){ <br>if(x==undefined) <br>return this._x||0; <br>this._x=x||0; <br>this._set3d(); <br>return this; <br>} <br>box3d.prototype.y=function(y){ <br>if(y==undefined) <br>return this._y||0; <br>this._y=y||0; <br>this._set3d(); <br>return this; <br>} <br>box3d.prototype.z=function(z){ <br>if(z==undefined) <br>return this._z||0; <br>this._z=z||0; <br>this._set3d(); <br>return this; <br>} <br>box3d.prototype._set3d=function(){ <br>var boxo=this.box; <br>var fl=this.fl; <br>var zomx=fl/(fl+this.z()); <br>var x=this.vx+zomx*this.x(); <br>var y=this.vy+zomx*this.y(); <br>boxo.zoomw(zomx).zoomh(zomx); <br>boxo.x(x); <br>boxo.y(y); <br>} <br><br><br>// <br>function slide(o){ <br>var d=$.extend({},{ <br>'z':100, <br>'secne':null <br>},o); <br>if(d.secne==null||!$(d.secne))return; <br>this.cecne=d.secne; <br>this.z=d.z; <br>this.sleep=0.02; <br>var k={'secne':d.secne,'w':80,'h':50,fl:1000}; <br>this.box=[]; <br>var c=8; <br>for(var i=0;i<c;i++){ <br>var t= parseInt(i-c/2); <br>var a=$('<div></div>').css({ <br>幅:'100%', <br>高さ:'100%', <br>背景:'#777' <br>}) <br><br>k.data =a; <br>var ubox=new box3d(k).z(300); <br>this.r(ubox,t/2); <br>this.box.push(ubox); <br>} <br>this.re_index(); <br>} <br>slide.prototype._moveaction=function(){ <br>var _this=this; <br>var s=this.sleep; <br>for(var i=0;i<this.box.length>this.r(this.box[i],s); <br>} <br>this.re_index(); <br>} <br>slide.prototype.r=function(rbox,s){ <br>if(!(rboxinstanceofbox3d)) <br>return; <br>var X=rbox.x(); <br>var Y=rbox.y() <br>var Z=rbox.z(); <br>var New_X = X*Math.cos(s) - Z*Math.sin(s); <br>var New_Z = X*Math.sin(s) Z*Math.cos(s); <br>var New_Y = Y; <br>rbox.x(New_X); <br>rbox.y(New_Y); <br>rbox.z(New_Z); <br>} <br>slide.prototype.re_index=function(){ <br>var arr=this.box; <br>var s=arr.length; <br>for(var j=0;j<s-1>for(var i=0;i<s-j-1>if(arr[i].z( )<arr>var c=arr[i]; <br>arr[i]=arr[i 1]; <br>arr[i 1]=c; <br>} <br>} <br>} <br>for(var i=0;i<arr.length>arr[i].box.z(i) <br>} <br>} <br>slide.prototype.start=function(){ <br>this.run=1; <br>this._move(); <br>} <br>slide.prototype.stop=function(){ <br>this.run=0; <br>} <br>slide.prototype._move=function(s){ <br>var _this=this; <br>setTimeout(function(){ <br>if(!_this.run){ <br>return; <br>} <br>_this._moveaction(); <br>_this._move(); <br> },50) <br>} <br>Sl.slide=スライド; <br>})() <br>$(function(){ <br>var s=new Sl.slide({secne:'.s_c'}); <br>$('#start').click( function(){s.start()}) <br>$('#stop').click(function(){s.stop()}) <br>}) <br></script> <br></head> <br> <br><div class='s_c'></div> <br><button id="スタート">スタート</button> <br><button id="stop">stop</button> <br></body> <br></html> <br></arr.length></arr></s-j-1></s-1></this.box.length> </div>
