創作內容

3 GP

紙娃娃相關懶人包(誤

作者：彌子、│2013-11-08 22:37:05│巴幣：6│人氣：285

FC2居然吃語法啊所以我只好發在這了(不是吧

－　－　－

JS的部分,這個放在<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>這段的下面(HTML的上方)

這邊能看到有3個function，var是變數　這樣就會幫你做很神奇的換衣功能(誤

var change;

var change2;

var HairStyle;

var HariCut;

partid, name都是變數，當你點到了衣服的小圖示之後就會用到它

getElementById方法，可以取得符合CSS中的id名稱的物件的內容

setAttribute方法，通常拿來改CSS設定的....像是width height src.....之類的，至於後面那個就是要改的値。

"/files/theme/"是weebly存上傳到的資料夾檔名，必須加

function characterDress(partid, name){

change = document.getElementById(partid);

change.setAttribute("src", "/files/theme/"+name);

}

跟上一個差不多的，這是我拿來處理吃頭髮的部分就不提了

function changeHairstyle(cut, style, color){

change = document.getElementById("hair");

change2= document.getElementById("back_hair");

change.setAttribute("src", "/files/theme/"+"hair"+style+color+".png");

change2.setAttribute("src", "/files/theme/"+"back_hair"+style+color+".png");

HairStyle=style;

HariCut=cut;

}

搭配window.addEventListener("load", start ,false);，可以讓start這個function在載完網頁時馬上呼叫

話說內容也是關於吃頭髮的，沒有要考慮髮型會被遮掩的這段可以忽略

function start(){

changeHairstyle(1, "01", "01");

}

window.addEventListener("load", start ,false);

</script>

－－－

以下都HTML跟CSS的部分

左側的全身預覽圖

div可以想像成一個區塊。

</div>

這個要搭配CSS，#hair就是對應到 id="hair"，id是不可以重複的不用擔心會設定到別的

順帶一提class是用 . (英文句點)

比較重要的是position:absolute(固定它的位置)，為了讓所有配件疊起來看起來像一張圖一樣

z-index(圖層的高度)，值愈大圖層愈高，像是衣服髮型圖層會比素體高

#mask{position:absolute; top:20px; z-index:30;}

#top{position:absolute; top:20px; z-index:20;}

#hair{position:absolute; top:20px; z-index:19;}

#eyes{position:absolute; top:20px; z-index:18;}

#emo{position:absolute; top:20px; z-index:17;}

#tattoo{position:absolute; top:20px; z-index:16;}

#weapon{position:absolute; top:20px; z-index:15;}

#glove{position:absolute; top:20px; z-index:14;}

#cloth{position:absolute; top:20px; z-index:13;}

#shoes{position:absolute; top:20px; z-index:12;}

#pant{position:absolute; top:20px; z-index:11;}

#skin{position:absolute; top:20px; z-index:9;}

#wing{position:absolute; top:20px; z-index:7;}

#back_hair{position:absolute; top:20px; z-index:5;}

#background{position:absolute; top:20px; z-index:0;}

－－－

然後最重要的服裝小圖示

一個圖示配一段這個，是的就這麼簡單（？

src放你的小圖示所在的位置跟檔名

onclick配上你JS改衣服的語法，這個是改髮型用的，所以用changeHairstyle

這樣你點下去就會呼叫changeHairstyle幫你改髮型囉

<div>

</div>

－－

為了怕搞錯所以放了使用了characterDress的來做對照組

<div>

</div>

喜歡 3 收藏引用留言推上首頁檢舉

引用網址：https://home.gamer.com.tw/TrackBack.php?sn=2236043
All rights reserved. 版權所有，保留一切權利

相關創作

【血液】

【靜電】

前傳－測試版《硝煙之子的輓歌》

江湖如此多嬌|最新2024禮包碼序號兌換碼,T0角色排行推薦

《緊急公告》部分文章死圖-修整中

留言共 2 篇留言

李小熙♪：
哦哦OAO++
謝謝大大分享((艸

11-08 22:40

彌子、：
其實我只是複製我網站的原始碼而已O3O...(被打11-09 11:17

李小熙♪：
還是幫了我很大的忙XDD((雖然還在弄圖片

11-09 11:25

我要留言提醒：您尚未登入，請先登入再留言

3 喜歡★iris61531 可決定是否刪除您的留言，請勿發表違反站規文字。

前一篇：MA - 魔裝莫德... 後一篇：13、12、01...

追蹤私訊切換新版閱覽

作品資料夾

【SilverCarnival 】 (8)

遊戲心得 (2)

●手做展示 (1)

未分類 (34)

kira1995321 給 takodachi：
昨天是一個很wah的好日子，我畫了賀圖!看更多我要大聲說41分前