2010-11-23 3rd budl Follow 2010-11-23 23:19:03 License: MIT License Fork0 Fav0 View580 Play Stop Reload Fullscreen Smart Phone Readme JavaScript 51 lines HTML 15 lines CSS 1 lines 2010-11-23 3rd Prototype JavaScript framework, v1.6.1 Event.observe(window , 'load' , function(){ var tm ; $('bu1').observe('click' , function(e){ //alert('click') }) //alert( e.element().tagName ) //var gTux = new Draggable( e.element() ) $('bu1').observe('mouseover' , function(e){ var x = 24 * 3 ; var y = 36 * 0 ; //e.element().setStyle({'backgroundPosition':' -72px '+ ' 0px'}) tm = setInterval( function(){ $('im1').setStyle({'backgroundPosition': '-' + x +'px -'+ y +'px'}) x -= 24 ; y += 36 ; if( x == -24 ){ x = 24 * 3 ; y = 36 * 0 ; } }, 150 ); }); $('bu1').observe('mouseout' , function(e){ $('im1').setStyle({'backgroundPosition':'-48px 0px'}) clearInterval( tm ) }); $('bu1').observe('mousedown' , function(e){ $('im1').setStyle({'backgroundPosition':'-0px -72px'}) clearInterval( tm ) }); $('bu1').observe('mouseup' , function(e){ $('im1').setStyle({'backgroundPosition':'-48px 0px'}) clearInterval( tm ) }); }); <button id='bu1' x=100 style='padding:0px;padding-left:12px;background:url(http://farm5.static.flickr.com/4087/5200054320_35b35b4117_m.jpg) -35px -108px no-repeat gray' ><table id='im1' cellpadding=0 cellspacing=0 style='width:24px; height:32px ; margin:0px ; padding:0px; background:url(http://farm5.static.flickr.com/4087/5200054320_35b35b4117_m.jpg) -48px -0px no-repeat' ><tr><td width='24' height='32' style='background-color:transparent' ></table> </button> <button id='ii' title='Qw' style='padding:0px;padding-left:12px;background:url(http://farm5.static.flickr.com/4087/5200054320_35b35b4117_m.jpg) -35px -108px no-repeat gray;border:1px solid gray;border-radius:4px;-moz-border-radius:4px;' onmousedown='if(this.o)return;clearInterval(this.tm);this.c[this.p]="-0px -72px"' onmouseover='if(this.o)return;if(!this.x){this.x=24*3;this.y=36*0;this.c=this.childNodes[0].style;this.p="backgroundPosition";this.onmouseup=this.onmouseout};this.tm=setInterval(function(t){t.c[t.p]="-"+t.x+"px -"+t.y+"px"; t.x-=24;t.y+=36;if(t.x<0){t.x=24*3;t.y=36*0}},150,this)' onmouseout='if(this.o)return;clearInterval(this.tm);this.c[this.p]="-48px 0px"' ondblclick='if(this.o){this.o=false;this.onmouseout();Element.setStyle($(this).childElements()[0],{width:"24px",height:"32px"}); }else{ Element.setStyle( $(this).childElements()[0] , {width:"48px",height:"64px",backgroundPosition:"0px 0px"});this.o=true;}' ><table cellpadding=0 cellspacing=0 style='width:24px;height:32px;margin:1px;padding:1px; background:url(http://farm5.static.flickr.com/4087/5200054320_35b35b4117_m.jpg) -48px -0px no-repeat' ><tr><td width='24' height='32' style='background-color:transparent' ></table> </button> 2010-11-23 3rd body { background-color: #DDDDDD; font: 30px sans-serif; } Event.observe(window , 'load' , function(){ var tm ; $('bu1').observe('click' , function(e){ //alert('click') }) //alert( e.element().tagName ) //var gTux = new Draggable( e.element() ) $('bu1').observe('mouseover' , function(e){ var x = 24 * 3 ; var y = 36 * 0 ; //e.element().setStyle({'backgroundPosition':' -72px '+ ' 0px'}) tm = setInterval( function(){ $('im1').setStyle({'backgroundPosition': '-' + x +'px -'+ y +'px'}) x -= 24 ; y += 36 ; if( x == -24 ){ x = 24 * 3 ; y = 36 * 0 ; } }, 150 ); }); $('bu1').observe('mouseout' , function(e){ $('im1').setStyle({'backgroundPosition':'-48px 0px'}) clearInterval( tm ) }); $('bu1').observe('mousedown' , function(e){ $('im1').setStyle({'backgroundPosition':'-0px -72px'}) clearInterval( tm ) }); $('bu1').observe('mouseup' , function(e){ $('im1').setStyle({'backgroundPosition':'-48px 0px'}) clearInterval( tm ) }); }); <button id='bu1' x=100 style='padding:0px;padding-left:12px;background:url(http://farm5.static.flickr.com/4087/5200054320_35b35b4117_m.jpg) -35px -108px no-repeat gray' ><table id='im1' cellpadding=0 cellspacing=0 style='width:24px; height:32px ; margin:0px ; padding:0px; background:url(http://farm5.static.flickr.com/4087/5200054320_35b35b4117_m.jpg) -48px -0px no-repeat' ><tr><td width='24' height='32' style='background-color:transparent' ></table> </button> <button id='ii' title='Qw' style='padding:0px;padding-left:12px;background:url(http://farm5.static.flickr.com/4087/5200054320_35b35b4117_m.jpg) -35px -108px no-repeat gray;border:1px solid gray;border-radius:4px;-moz-border-radius:4px;' onmousedown='if(this.o)return;clearInterval(this.tm);this.c[this.p]="-0px -72px"' onmouseover='if(this.o)return;if(!this.x){this.x=24*3;this.y=36*0;this.c=this.childNodes[0].style;this.p="backgroundPosition";this.onmouseup=this.onmouseout};this.tm=setInterval(function(t){t.c[t.p]="-"+t.x+"px -"+t.y+"px"; t.x-=24;t.y+=36;if(t.x<0){t.x=24*3;t.y=36*0}},150,this)' onmouseout='if(this.o)return;clearInterval(this.tm);this.c[this.p]="-48px 0px"' ondblclick='if(this.o){this.o=false;this.onmouseout();Element.setStyle($(this).childElements()[0],{width:"24px",height:"32px"}); }else{ Element.setStyle( $(this).childElements()[0] , {width:"48px",height:"64px",backgroundPosition:"0px 0px"});this.o=true;}' ><table cellpadding=0 cellspacing=0 style='width:24px;height:32px;margin:1px;padding:1px; background:url(http://farm5.static.flickr.com/4087/5200054320_35b35b4117_m.jpg) -48px -0px no-repeat' ><tr><td width='24' height='32' style='background-color:transparent' ></table> </button> body { background-color: #DDDDDD; font: 30px sans-serif; } use an iframe compat browser, deer Play on jsdo.it games Share Embed QR Tag Download Complete! Description どんなゲームですか？ Control Device スマートフォンコントローラー jsdo.it WebSocket Controller» マウス キーボード タッチデバイス Fullscreen 有効 無効 jsdo.it games から削除する Submit Tweet style Design view Code view code <script type="text/javascript" src="http://jsdo.it/blogparts/q1T8/js?view=design"></script><p class="ttlBpJsdoit" style="width: 465px; margin: 0; text-align: right; font-size: 11px;"><a href="http://jsdo.it/budl/q1T8" title="2010-11-23 3rd">2010-11-23 3rd - jsdo.it - share JavaScript, HTML5 and CSS</a></p> Tweet twitter
