이 기사 예는 JS에서 QQ 쇼 드레스 업을 모방하는 효과를 달성하는 방법을 설명합니다. 참조를 위해 공유하십시오. 특정 구현 방법은 다음과 같습니다.
다음과 같이 코드를 복사하십시오. <! doctype html public "-// w3c // dtd xhtml 1.0 Transitional // en" "www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns = "www.w3.org/1999/xhtml">
<헤드>
<title> 모방 QQ 드레스 업 효과 쇼 </title>
<meta http-equiv = "content-type"content = "text/html; charset = gb2312">
<!-<head>와 </head>-> 사이에 다음 코드를 추가하십시오
<스타일>
#CS IMG {커서 : 핸드}
</스타일>
<base href = "http://www.zzsky.cn/effect/images/qqshow/">
</head>
<body>
<!-<body>와 </body>-> 사이에 다음 코드를 추가하십시오
<!-이미지 미리보기를 표시 할 다음 코드를 배치합니다->
<div id = "bodyshow"style = "테두리 : 1px solid #000000; 패딩 : 0; 위치 : 상대; 왼쪽 : 0px; 상단 : 0px; 높이 : 226px; 너비 : 140px;"> </div>
<!-이것은 제출 양식으로, 사용자 이미지를 나타내는 문자열을 숨겨진 도메인 userrequip 제출에 할당합니다.
<form name = "lifectform"method = "post"action = "">
<입력 이름 = "userequip"type = "hidden"value = "">
<입력 이름 = "Save Equip"유형 = "제출"값 = "이미지 저장">
<입력 이름 = "toreequip"type = "button"value = "Original Image"onclick = "shoiwit ( 'df> df> df> 0'); return false;" >
</form>
<script language = "javaScript">
<!-
var myequip = "df> df> df> 0"; // 서버에서 초기 디스플레이 구성 코드를 읽고 출력 할 수 있습니다.
함수 shoewit (lequic) {//이 함수는 가상 아바타를 표시하는 매개 변수로 구성됩니다.
showlayers = lequp.split ( '>'); // ">"를 분리기로 사용하여 각 레이어의 이미지 이름을 배열 showlayers []에 할당합니다.
str = "";
for (i = 0; i <showlayers.length; i ++) {
if (showlayers [i]! = '0'&& showlayers [i]! = '') {// 이미지 이름이 0이거나 비어 있으면 레이어가 표시되지 않습니다.
str+= "<img src = '+(i+1)+"/"+showlayers [i]+". gif'style = 'padding : 0; 위치 : 절대; 상단 : 0; 너비 : 140; 높이 : 226; z-index : "+(i+1)+";'>;
}
}
// 마지막으로 상단 계층의 완전히 투명한 이미지를 덮으므로 사용자가 위의 오른쪽 링크에만 저장할 수 있습니다.
str+= "<img src = 'blank.gif'style = '패딩 : 0; 위치 : 절대; 상단 : 0; 왼쪽 : 0; 너비 : 140; 높이 : 226; z-index : 100;'>";
if (lequipform.userequip) lequepform.userequip.value = myequip = liture; // 구성 코드를 숨겨진 도메인에 할당합니다
BodyShow.innerhtml = str; // 각 레이어의 사진을 보여줍니다.
}
// 페이지로드 후 초기 가상 이미지가 먼저 표시됩니다.
document.body.onload = 새 함수 ( "shoiwit (myequip)");
function dressit (layer, img) {//이 함수는 구성을 변경하는 데 사용됩니다. 매개 변수는 레이어 수, 이미지 이름입니다.
//event.returnValue=false;
showlayers = myequip.split ( '>');
newequip = "";
for (i = 0; i <showlayers.length; i ++) {
if (i+1 == 레이어) {
if (img == showlayers [i]) newequip+= "df"; // 레이어가 이미이 그림 인 경우 원래 그림으로 복원됩니다.
else newequip+= img; // 그렇지 않으면이 사진으로 변경됩니다
}
else newequip+= showlayers [i]; // 다른 그림 층은 변경되지 않았습니다
if (i+1! = showlayers.length) new equip+= ">";
}
Shoiwit (Newquip); // 최신 구성을 표시합니다
}
->
</스크립트>
<script event = "onclick"for = "cs">
var obj = event.srcelement;
if (obj.tagname! = "img") retoy;
var vars = obj.src.match (/// (/d) // (/d) x/.gif $/);
Dressit (vars [1], vars [2]);
</스크립트>
<table cellPacing = "0"CellPadding = "0"id = "CS">
<tr>
<td> <img src = "4/1x.gif"> </td>
<td> <img src = "4/2x.gif"> </td>
<td> <img src = "4/3x.gif"> </td>
<td> <img src = "4/4x.gif"> </td>
</tr>
<tr>
<td> <img src = "3/1x.gif"> </td>
<td> <img src = "3/2x.gif"> </td>
<td> <img src = "3/3x.gif"> </td>
<td> <img src = "3/4x.gif"> </td>
</tr>
<tr>
<td> <img src = "2/1x.gif"> </td>
<td> <img src = "2/2x.gif"> </td>
<td> <img src = "2/3x.gif"> </td>
<td> <img src = "2/4x.gif"> </td>
</tr>
<tr>
<td> <img src = "1/1x.gif"> </td>
<td> <img src = "1/2x.gif"> </td>
<td> <img src = "1/3x.gif"> </td>
<td> <img src = "1/4x.gif"> </td>
</tr>
</테이블>
</body>
</html>
작동 효과는 아래 그림에 나와 있습니다.
이 기사가 모든 사람의 JavaScript 프로그래밍에 도움이되기를 바랍니다.