pigg comtec Follow 2011-03-25 17:38:18 License: MIT License Fork66 Fav1 View32370 Play Stop Reload Fullscreen Smart Phone Fork tree Readme JavaScript 60 lines HTML 19 lines CSS 51 lines pigg jQuery v1.4.4 //▼画像は下記URLよりダウンロードして下さい //http://www.cyberagent.co.jp/img/media/kayac/piggitem.zip //アイテム画像・表示位置のオブジェクト var itemImg = { img:"http://adc.heteml.jp/spec/2011/pigg/item.png", top:"228px", left:"191px" }; //アイテムをきせる/脱がす判定フラグ var selectFlag = true; //アイテムアイコンclickにaddItem関数をbind $("#item").click(function(e){ selectFunc(e.target); }); //アイテムをきせる関数addItemを定義 function addItem(arg_additem){ //きせかえアイテム画像を追加、位置調整 $('<img id="' + arg_additem.id + 'img" src="' + itemImg.img + '" />').appendTo($('#piggArea')); $('#' + arg_additem.id + 'img').css('top', itemImg.top) .css('left', itemImg.left); //下着を非表示 $("#piggunderwear").css('display','none'); } //アイテムを脱がす関数cancelItemを定義 function cancelItem(arg_cancelitem){ //きせているアイテムの削除 $("#"+arg_cancelitem.id+"img").remove(); //下着を表示 $("#piggunderwear").css('display','block'); } //アイテムをきせる/脱がすを選択する関数 function selectFunc(arg_select){ if(selectFlag){ //addItem関数の実行 addItem(arg_select); //フラグをfalseに変更 selectFlag = false; }else{ //cancelItem関数の実行 cancelItem(arg_select); //フラグをtrueに変更 selectFlag = true; } } <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja"> <head> <meta http-equiv="content-language" content="ja" /> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <title>アメーバピグきせかえ</title> </head> <body> <div id="content"> <div id="piggArea"> <img id="pigg" src="http://adc.heteml.jp/spec/2011/pigg/pigg.png" /> <img id="piggunderwear" src="http://adc.heteml.jp/spec/2011/pigg/pigg_underwear.png" /> </div> <div id="itemArea"> <a href="#" onclick="return false"><img id="item" src="http://adc.heteml.jp/spec/2011/pigg/itemicon.png" alt="イタリアオヤジ風モテロック" /></a> </div> </div> </body> </html> pigg body { background-color:#FFFFFF; } img{ border:0; } div,ul,li,p{ padding:0; margin:0; } div#content{ width:450px; height:450px; background-color:#FFFFFF; } div#piggArea{ width:450px; height:307px; position:relative; } div#piggArea img{ position:absolute; } img#pigg{ z-index:0; top:135px; left:165px; } img#piggunderwear{ z-index:1; top:260px; left:202px; } div#itemArea{ margin-top:15px; position:relative; } img#item{ position:absolute; left:195px; } //▼画像は下記URLよりダウンロードして下さい //http://www.cyberagent.co.jp/img/media/kayac/piggitem.zip //アイテム画像・表示位置のオブジェクト var itemImg = { img:"http://adc.heteml.jp/spec/2011/pigg/item.png", top:"228px", left:"191px" }; //アイテムをきせる/脱がす判定フラグ var selectFlag = true; //アイテムアイコンclickにaddItem関数をbind $("#item").click(function(e){ selectFunc(e.target); }); //アイテムをきせる関数addItemを定義 function addItem(arg_additem){ //きせかえアイテム画像を追加、位置調整 $('<img id="' + arg_additem.id + 'img" src="' + itemImg.img + '" />').appendTo($('#piggArea')); $('#' + arg_additem.id + 'img').css('top', itemImg.top) .css('left', itemImg.left); //下着を非表示 $("#piggunderwear").css('display','none'); } //アイテムを脱がす関数cancelItemを定義 function cancelItem(arg_cancelitem){ //きせているアイテムの削除 $("#"+arg_cancelitem.id+"img").remove(); //下着を表示 $("#piggunderwear").css('display','block'); } //アイテムをきせる/脱がすを選択する関数 function selectFunc(arg_select){ if(selectFlag){ //addItem関数の実行 addItem(arg_select); //フラグをfalseに変更 selectFlag = false; }else{ //cancelItem関数の実行 cancelItem(arg_select); //フラグをtrueに変更 selectFlag = true; } } <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja"> <head> <meta http-equiv="content-language" content="ja" /> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <title>アメーバピグきせかえ</title> </head> <body> <div id="content"> <div id="piggArea"> <img id="pigg" src="http://adc.heteml.jp/spec/2011/pigg/pigg.png" /> <img id="piggunderwear" src="http://adc.heteml.jp/spec/2011/pigg/pigg_underwear.png" /> </div> <div id="itemArea"> <a href="#" onclick="return false"><img id="item" src="http://adc.heteml.jp/spec/2011/pigg/itemicon.png" alt="イタリアオヤジ風モテロック" /></a> </div> </div> </body> </html> body { background-color:#FFFFFF; } img{ border:0; } div,ul,li,p{ padding:0; margin:0; } div#content{ width:450px; height:450px; background-color:#FFFFFF; } div#piggArea{ width:450px; height:307px; position:relative; } div#piggArea img{ position:absolute; } img#pigg{ z-index:0; top:135px; left:165px; } img#piggunderwear{ z-index:1; top:260px; left:202px; } div#itemArea{ margin-top:15px; position:relative; } img#item{ position:absolute; left:195px; } use an iframe compat browser, deer Play on jsdo.it games Author Share ブログに埋め込む QR Tag Download Complete! Description What kind of game? Control Device Smartphone Controllerjsdo.it WebSocket Controller» Mouse Keyboard Touch Device Fullscreen Activated Inactivated jsdo.it games から削除する Submit Author comtec Tweet Default Panel Auto play Screenshot Readme JavaScript HTML CSS Size Width: px Height: px code <script type="text/javascript" src="http://jsdo.it/blogparts/lAWC/js"></script> Discussion Questions on this code? Favorite by savage69kr Forked sort by latest page views favorite forked forked: pigg otot76 00 293 61/19/51 forked: pigg Arvind.Raghu 00 446 61/19/51 forked: pigg fingaholic 00 742 61/19/51 forked: pigg akira.dearuk 00 503 61/19/51 1 2 3 4 5 6 7 8 9 10NEXT>>
