◆少前百科是非盈利性、非官方的少女前线维基百科。
◆如果您发现某些内容错误/空缺，请勇于修正/添加！参与进来其实很容易！点这里 加入少前百科。
◆有任何意见、建议、纠错，欢迎在 GFwiki:反馈与建议 提出和讨论。编辑事务讨论QQ群：597764980，微博@GFwiki少前百科
◆To foreigners，You can use twitter to contact us. 		Icon Nyto Silver.png

“Widget:Costume/js”的版本间的差异

来自少前百科GFwiki
跳转至： 导航、 搜索
（测试）
 
（未显示3个用户的39个中间版本）
第2行： 第2行：
  
 
var picarr = [];
 
var picarr = [];
−
<!--{if ($num1)}-->picarr.push({num:<!--{$num1}-->, doll:"<!--{$doll1}-->", name:"<!--{$name1}-->", line:"<!--{$line1}-->", pic0:"<!--{$pica0}-->", pic1:"<!--{$picb1}-->"});<!--{else}--><!--{/if}-->
+
<!--{if ($num1)}-->picarr.push({num:<!--{$num1}-->, doll:"<!--{$doll1}-->", code:"<!--{$code1}-->", name:"<!--{$name1}-->", line:"<!--{$line1}-->", pic0:"<!--{$pica1}-->", pic1:"<!--{$picb1}-->"});<!--{else}--><!--{/if}-->
−
<!--{if ($num2)}-->picarr.push({num:<!--{$num2}-->, doll:"<!--{$doll2}-->", name:"<!--{$name2}-->", line:"<!--{$line2}-->", pic0:"<!--{$pica2}-->", pic1:"<!--{$picb2}-->"});<!--{else}--><!--{/if}-->
+
<!--{if ($num2)}-->picarr.push({num:<!--{$num2}-->, doll:"<!--{$doll2}-->", code:"<!--{$code2}-->", name:"<!--{$name2}-->", line:"<!--{$line2}-->", pic0:"<!--{$pica2}-->", pic1:"<!--{$picb2}-->"});<!--{else}--><!--{/if}-->
−
<!--{if ($num3)}-->picarr.push({num:<!--{$num3}-->, doll:"<!--{$doll3}-->", name:"<!--{$name3}-->", line:"<!--{$line3}-->", pic0:"<!--{$pica3}-->", pic1:"<!--{$picb3}-->"});<!--{else}--><!--{/if}-->
+
<!--{if ($num3)}-->picarr.push({num:<!--{$num3}-->, doll:"<!--{$doll3}-->", code:"<!--{$code3}-->", name:"<!--{$name3}-->", line:"<!--{$line3}-->", pic0:"<!--{$pica3}-->", pic1:"<!--{$picb3}-->"});<!--{else}--><!--{/if}-->
−
<!--{if ($num4)}-->picarr.push({num:<!--{$num4}-->, doll:"<!--{$doll4}-->", name:"<!--{$name4}-->", line:"<!--{$line4}-->", pic0:"<!--{$pica4}-->", pic1:"<!--{$picb4}-->"});<!--{else}--><!--{/if}-->
+
<!--{if ($num4)}-->picarr.push({num:<!--{$num4}-->, doll:"<!--{$doll4}-->", code:"<!--{$code4}-->", name:"<!--{$name4}-->", line:"<!--{$line4}-->", pic0:"<!--{$pica4}-->", pic1:"<!--{$picb4}-->"});<!--{else}--><!--{/if}-->
−
<!--{if ($num5)}-->picarr.push({num:<!--{$num5}-->, doll:"<!--{$doll5}-->", name:"<!--{$name5}-->", line:"<!--{$line5}-->", pic0:"<!--{$pica5}-->", pic1:"<!--{$picb5}-->"});<!--{else}--><!--{/if}-->
+
<!--{if ($num5)}-->picarr.push({num:<!--{$num5}-->, doll:"<!--{$doll5}-->", code:"<!--{$code5}-->", name:"<!--{$name5}-->", line:"<!--{$line5}-->", pic0:"<!--{$pica5}-->", pic1:"<!--{$picb5}-->"});<!--{else}--><!--{/if}-->
−
<!--{if ($num6)}-->picarr.push({num:<!--{$num6}-->, doll:"<!--{$doll6}-->", name:"<!--{$name6}-->", line:"<!--{$line6}-->", pic0:"<!--{$pica6}-->", pic1:"<!--{$picb6}-->"});<!--{else}--><!--{/if}-->
+
<!--{if ($num6)}-->picarr.push({num:<!--{$num6}-->, doll:"<!--{$doll6}-->", code:"<!--{$code6}-->", name:"<!--{$name6}-->", line:"<!--{$line6}-->", pic0:"<!--{$pica6}-->", pic1:"<!--{$picb6}-->"});<!--{else}--><!--{/if}-->
−
<!--{if ($num7)}-->picarr.push({num:<!--{$num7}-->, doll:"<!--{$doll7}-->", name:"<!--{$name7}-->", line:"<!--{$line7}-->", pic0:"<!--{$pica7}-->", pic1:"<!--{$picb7}-->"});<!--{else}--><!--{/if}-->
+
<!--{if ($num7)}-->picarr.push({num:<!--{$num7}-->, doll:"<!--{$doll7}-->", code:"<!--{$code7}-->", name:"<!--{$name7}-->", line:"<!--{$line7}-->", pic0:"<!--{$pica7}-->", pic1:"<!--{$picb7}-->"});<!--{else}--><!--{/if}-->
−
<!--{if ($num8)}-->picarr.push({num:<!--{$num8}-->, doll:"<!--{$doll8}-->", name:"<!--{$name8}-->", line:"<!--{$line8}-->", pic0:"<!--{$pica8}-->", pic1:"<!--{$picb8}-->"});<!--{else}--><!--{/if}-->
+
<!--{if ($num8)}-->picarr.push({num:<!--{$num8}-->, doll:"<!--{$doll8}-->", code:"<!--{$code8}-->", name:"<!--{$name8}-->", line:"<!--{$line8}-->", pic0:"<!--{$pica8}-->", pic1:"<!--{$picb8}-->"});<!--{else}--><!--{/if}-->
−
<!--{if ($num9)}-->picarr.push({num:<!--{$num9}-->, doll:"<!--{$doll9}-->", name:"<!--{$name9}-->", line:"<!--{$line9}-->", pic0:"<!--{$pica9}-->", pic1:"<!--{$picb9}-->"});<!--{else}--><!--{/if}-->
+
<!--{if ($num9)}-->picarr.push({num:<!--{$num9}-->, doll:"<!--{$doll9}-->", code:"<!--{$code9}-->", name:"<!--{$name9}-->", line:"<!--{$line9}-->", pic0:"<!--{$pica9}-->", pic1:"<!--{$picb9}-->"});<!--{else}--><!--{/if}-->
−
<!--{if ($num10)}-->picarr.push({num:<!--{$num10}-->, doll:"<!--{$doll10}-->", name:"<!--{$name10}-->", line:"<!--{$line10}-->", pic0:"<!--{$pica10}-->", pic1:"<!--{$picb10}-->"});<!--{else}--><!--{/if}-->
+
<!--{if ($num10)}-->picarr.push({num:<!--{$num10}-->, doll:"<!--{$doll10}-->", code:"<!--{$code10}-->", name:"<!--{$name10}-->", line:"<!--{$line10}-->", pic0:"<!--{$pica10}-->", pic1:"<!--{$picb10}-->"});<!--{else}--><!--{/if}-->
−
<!--{if ($num11)}-->picarr.push({num:<!--{$num11}-->, doll:"<!--{$doll11}-->", name:"<!--{$name11}-->", line:"<!--{$line11}-->", pic0:"<!--{$pica11}-->", pic1:"<!--{$picb11}-->"});<!--{else}--><!--{/if}-->
+
<!--{if ($num11)}-->picarr.push({num:<!--{$num11}-->, doll:"<!--{$doll11}-->", code:"<!--{$code11}-->", name:"<!--{$name11}-->", line:"<!--{$line11}-->", pic0:"<!--{$pica11}-->", pic1:"<!--{$picb11}-->"});<!--{else}--><!--{/if}-->
−
<!--{if ($num12)}-->picarr.push({num:<!--{$num12}-->, doll:"<!--{$doll12}-->", name:"<!--{$name12}-->", line:"<!--{$line12}-->", pic0:"<!--{$pica12}-->", pic1:"<!--{$picb12}-->"});<!--{else}--><!--{/if}-->
+
<!--{if ($num12)}-->picarr.push({num:<!--{$num12}-->, doll:"<!--{$doll12}-->", code:"<!--{$code12}-->", name:"<!--{$name12}-->", line:"<!--{$line12}-->", pic0:"<!--{$pica12}-->", pic1:"<!--{$picb12}-->"});<!--{else}--><!--{/if}-->
  
−
var picstate = 0; // 0：正常 1：重创
+
let height = window.innerHeight;
−
var loadstate = 0;
+
let width = window.innerWidth;
 +
if(width > height) $("#suitdiv").height(height - 40);
 +
if(width > height) $("#skinImgDiv").width(height - 40);
 +
else{ $("#skinImgDiv").width(width - 40); $("#skinImgDiv").height(width - 40);}
  
−
loadcreat(pic0);
+
var picState = 0; // 0：正常 1：重创
−
loadcreat(pic1);
+
var picIndex = 0; // 当前选择的立绘Index
−
function loadcreat(pic){
+
 
 +
loadcreat();
 +
function loadcreat(){
 
     for(let i = 0; i < picarr.length; i++){
 
     for(let i = 0; i < picarr.length; i++){
−
         var img = new Image();
+
         for(j in ["pic0", "pic1"]){
−
        $(img).load(function(){  
+
            var img = new Image();
−
            $(this).remove();
+
            $(img).load(function(){$(this).remove();});  
−
 
+
             $(img).attr({"src":picarr[i][["pic0", "pic1"][j]]});
−
            loadstate ++;
+
        }
−
            console.log($(img).attr("src") + " complete");
 
−
             if(loadstate == picarr.length * 2) console.log("all completed");
 
−
        });
 
−
       $(img).attr({"src":picarr[i]["pic"]});
 
 
     }
 
     }
 
}
 
}
  
−
function loadcircle(){
+
// 人形装扮选择序列的DOM创建
−
   
+
var skinNameDiv = document.querySelectorAll(".skinname");
−
    setTimeout(function(){
+
for(let i = 0; i < skinNameDiv.length; i++){
−
        $("#skininfodoll").html(picarr[num].doll);
+
    let text = `<div class="skinnamedoll">` + picarr[i].doll + `<\/div><div class="skinnameskin">` + picarr[i].name + `<\/div>`;
−
        $("#skininfoname").html(picarr[num].name);
+
    $(skinNameDiv[i]).html(text);
−
        $("#skindollline").html(picarr[num].line);
 
−
        $("#skininfo").slideDown(60);
 
−
        $("#skindollline").slideDown(60);
 
−
    }, 60);
 
 
}
 
}
  
−
//选项 button
+
var picnDiv = document.querySelectorAll(".picndiv");
−
$("#normalbtn").click(function(){
+
for(let i = 0; i < picnDiv.length; i++) $(picnDiv[i]).attr("index", i);
−
    if(picstate == 0) return;
 
−
    picstate = 0;
 
−
    $("#normalbtn").css({"background-color":"#f4c430", "color":"#000000"});
 
−
    $("#destroybtn").css({"background-color":"#222222", "color":"#eaeaea"});
 
−
    $(".picn").css({"left":"0px"});
 
−
    picchange(Number($("#thepic").attr("number")) - 1);
 
−
});
 
−
$("#destroybtn").click(function(){
 
−
    if(picstate == 1) return;
 
−
    picstate = 1;
 
−
    $("#destroybtn").css({"background-color":"#f4c430", "color":"#000000"});
 
−
    $("#normalbtn").css({"background-color":"#222222", "color":"#eaeaea"});
 
−
    $(".picn").css({"left":"-120px"});
 
−
    picchange(Number($("#thepic").attr("number")) - 1);
 
−
});
 
−
$("#normalbtn").css({"background-color":"#f4c430", "color":"#000000"});
 
  
−
$("#hidebtn").attr("state", "0");
+
$(".picndiv").click(function(){
−
$("#hidebtn").click(function(){
+
     $("img.picn").css("border-top", "4px solid #eaeaea");
−
     if($("#hidebtn").attr("state") == "0"){
+
    $(this).children("img.picn").css("border-top", "4px solid #f4c430");
−
        $(this).css({"background-color":"#f4c430", "color":"#000000"});
 
−
        $(this).attr("state", "1");
 
−
        $("#picsdiv").fadeOut(100);
 
−
    } else {
 
−
        $(this).css({"background-color":"#222222", "color":"#eaeaea"});
 
−
        $(this).attr("state", "0");
 
−
        $("#picsdiv").fadeIn(100);
 
−
    }
 
−
});
 
  
−
$("#leftbtn").click(function(){
+
    $(".picndiv").children(".skinname").css({"background-color":"#1a1a1a"});
−
     let thisnum = Number($("#thepic").attr("number"));
+
     $(".picndiv").children(".skinname").children("div").css({"color":"#eaeaea"});
−
     let nextnum = thisnum - 1;
+
     $(this).children(".skinname").css({"background-color":"#f4c430"});
−
     if(thisnum <= 1) nextnum = picarr.length;
+
     $(this).children(".skinname").children("div").css({"color":"#000000"});
  
−
     $("#thepic").attr("number", nextnum);
+
     picIndex = $(this).attr("index");
−
     $(picndiv[nextnum - 1]).click();
+
     skinChange(Number($(this).attr("index")));
 
});
 
});
−
$("#rightbtn").click(function(){
+
$(picnDiv[0]).click();
−
    let thisnum = Number($("#thepic").attr("number"));
+
 
−
     let nextnum = thisnum + 1;
+
$("#thepic").click(function(event){
−
     if(thisnum >= picarr.length) nextnum = 1;
+
     let relative_x = event.offsetX;
 +
     let pic_width = $(this).width();
  
−
     $("#thepic").attr("number", nextnum);
+
     if(relative_x < pic_width / 4) skinPrev();
−
     $(picndiv[nextnum - 1]).click();
+
     else if(relative_x > pic_width / 4 * 3) skinNext();
−
});
+
     else skinStateSwitch();
−
$("#switchbtn").click(function(){
 
−
    if(picstate == 0) $("#destroybtn").click();
 
−
     else $("#normalbtn").click();
 
 
});
 
});
  
−
//人形装扮选择
+
// 装扮切换的函数 分别处理立绘、spine、人形、装扮名称、台词
−
var namediv = document.querySelectorAll(".skinname");
+
function skinNext(){
−
for(let i = 0; i < namediv.length; i++){
+
    let nextNum = Number(picIndex) + 1;
−
     $(namediv[i]).html(picarr[i].doll + "-" + picarr[i].name);
+
    if(picIndex >= picarr.length - 1) nextNum = 0;
 +
     $(picnDiv[nextNum]).click();
 
}
 
}
  
−
var picndiv = document.querySelectorAll(".picndiv");
+
function skinPrev(){
−
for(let i = 0; i < picndiv.length; i++){
+
    let prevNum = picIndex - 1;
−
     $(picndiv[i]).attr("number", i + 1);
+
     if(picIndex <= 0) prevNum = picarr.length - 1;
−
     $(picndiv[i]).css("left", i*60 + "px");
+
     $(picnDiv[prevNum]).click();
 
}
 
}
−
$(".picndiv").mouseover(function(){
 
−
    let thisnum = Number($(this).attr("number"));
 
−
    for(let i = thisnum + 1; i <= picndiv.length; i++){
 
−
        $(picndiv[i - 1]).stop();
 
−
        $(picndiv[i - 1]).animate({"left": String(i * 60) + "px"});
 
−
    }
 
−
});
 
−
$(".picndiv").mouseout(function(){
 
−
    let thisnum = Number($(this).attr("number"));
 
−
    for(let i = thisnum + 1; i <= picndiv.length; i++){
 
−
        $(picndiv[i - 1]).stop();
 
−
        $(picndiv[i - 1]).animate({"left": String(i * 60 - 60) + "px"});
 
−
    }
 
−
});
 
−
$(".picndiv").click(function(){
 
−
    $(".picndiv").css("border-top", "4px solid #eaeaea");
 
−
    $(this).css("border-top", "4px solid #f4c430");
 
  
−
    $(".picndiv").children(".skinname").css({"background-color":"#222222", "color":"#eaeaea"});
+
function skinStateSwitch(){
−
     $(this).children(".skinname").css({"background-color":"#f4c430", "color":"#000000"});
+
    picState = (picState) ? 0 : 1;
 +
     skinChange("skinStateSwitch");
 +
}
  
−
     $("#thepic").attr("number", $(this).attr("number"));
+
function skinChange(mode){
−
     skinchange(Number($(this).attr("number")) - 1);
+
     picChange();
−
});
+
   if(mode != "skinStateSwitch")spineChange();
−
$(picndiv[0]).click();
+
    if(mode != "skinStateSwitch")$("#skininfodoll").html(picarr[picIndex].doll);
−
 
+
     if(mode != "skinStateSwitch")$("#skininfoname").html(picarr[picIndex].name);
−
//装扮切换
+
    if(mode != "skinStateSwitch")$("#skindollline").html(picarr[picIndex].line);
−
function skinchange(num){
+
}
−
    picchange(num);
 
−
    spinechange(num);
 
  
−
    $("#skininfo").slideUp(60);
+
function picChange(){
−
    $("#skindollline").slideUp(60);
 
−
    setTimeout(function(){
 
−
        $("#skininfodoll").html(picarr[num].doll);
 
−
        $("#skininfoname").html(picarr[num].name);
 
−
        $("#skindollline").html(picarr[num].line);
 
−
        $("#skininfo").slideDown(60);
 
−
        $("#skindollline").slideDown(60);
 
−
    }, 60);
 
−
}
 
−
function picchange(num){
 
 
     $("#thepic").fadeOut(60);
 
     $("#thepic").fadeOut(60);
 
     setTimeout(function(){
 
     setTimeout(function(){
−
         if(picstate == 0) $("#thepic").attr("src", picarr[num].pic0);
+
         if(picState == 0) $("#thepic").attr("src", picarr[picIndex].pic0);
−
         else $("#thepic").attr("src", picarr[num].pic1);
+
         else $("#thepic").attr("src", picarr[picIndex].pic1);
 
         setTimeout(function(){
 
         setTimeout(function(){
 
             $("#thepic").fadeIn(60);
 
             $("#thepic").fadeIn(60);
第160行： 第104行：
 
     }, 60);
 
     }, 60);
 
}
 
}
−
function spinechange(num){
+
 
 +
function spineChange(){
 
     $("#spineSkinBox").children("canvas").fadeOut(100);
 
     $("#spineSkinBox").children("canvas").fadeOut(100);
 
     setTimeout(function(){
 
     setTimeout(function(){
−
         ($(".chibi-costume-switcher").children("option"))[num].selected = true;
+
         ($(".chibi-costume-switcher").children("option"))[picIndex].selected = true;
 
         swap_costume($(".chibi-costume-switcher"), 'spineSkinBox');
 
         swap_costume($(".chibi-costume-switcher"), 'spineSkinBox');
 
         $("#spineSkinBox").children("canvas").fadeIn(100);
 
         $("#spineSkinBox").children("canvas").fadeIn(100);
第169行： 第114行：
 
}
 
}
  
−
//其它设置
+
// spine的DOM创建 黑盒
−
deletebtt();
 
−
function deletebtt(){
 
−
    if($(".backToTop")){
 
−
        $(window).unbind("scroll").removeAttr("onscroll");
 
−
        $(".backToTop").hide();
 
−
        return;
 
−
    } else {
 
−
    setTimeout(function(){
 
−
        deletebtt();
 
−
    }, 100);}
 
−
}
 
−
    setTimeout(function(){
 
−
        $(window).unbind("scroll").removeAttr("onscroll");
 
−
        $(".backToTop").hide();
 
−
    }, 1000);
 
−
    setTimeout(function(){
 
−
        $(window).unbind("scroll").removeAttr("onscroll");
 
−
        $(".backToTop").hide();
 
−
    }, 10000);
 
−
 
 
−
//spine
 
 
let html_str = `<select class="chibi-costume-switcher" autocomplete="off" onchange="swap_costume(this)" style="display:none;">`;
 
let html_str = `<select class="chibi-costume-switcher" autocomplete="off" onchange="swap_costume(this)" style="display:none;">`;
−
html_str += `<option selected="selected" value="` + picarr[0].num + `" data-tdoll="` + picarr[0].doll + `"></option>`;
+
html_str += `<option selected="selected" value="` + picarr[0].num + `" data-tdoll="` + picarr[0].code + `"></option>`;
−
for(let i = 1; i < picarr.length; i ++){
+
for(let i = 1; i < picarr.length; i ++) html_str += `<option value="` + picarr[i].num + `" data-tdoll="` + picarr[i].code + `"></option>`;
−
    html_str += `<option value="` + picarr[i].num + `" data-tdoll="` + picarr[i].doll + `"></option>`;
 
−
}
 
 
html_str += `</select>`;
 
html_str += `</select>`;
  
第237行： 第159行：
 
     $(".chibiAnimationContainer").attr('data-tdoll-id', tdollId);
 
     $(".chibiAnimationContainer").attr('data-tdoll-id', tdollId);
 
     $(".chibiAnimationContainer").attr('data-tdoll-costume', chibiCostumeName);
 
     $(".chibiAnimationContainer").attr('data-tdoll-costume', chibiCostumeName);
−
     $(".chibiAnimationContainer").find('.chibiAnimation').trigger("costume_changed", [chibiCostumeName , tdollId , tdollId]);
+
     $(".chibiAnimationContainer").find('.chibiAnimation').trigger("costume_changed", [chibiCostumeName , tdollId]);
 +
    if($(".chibiAnimationContainer").children('.chibiDormButton').hasClass('stateon')) {
 +
        var currentDormButton = $(".chibiAnimationContainer").children('.chibiDormButton');
 +
        var futureEnabledState = currentDormButton.hasClass('stateoff');
 +
        if(futureEnabledState) {
 +
            currentDormButton.addClass('stateon');
 +
            currentDormButton.removeClass('stateoff');
 +
        } else {
 +
            currentDormButton.removeClass('stateon');
 +
            currentDormButton.addClass('stateoff');
 +
        }
 +
    }
 
     var costumeId = tdollId + chibiCostumeName;
 
     var costumeId = tdollId + chibiCostumeName;
 
     var cpp = window.gfUtils.createWikiPathPart;
 
     var cpp = window.gfUtils.createWikiPathPart;
第245行： 第178行：
 
     $(".tdoll_chibi>img,.chibiAnimationContainer>img").attr("src", chibiPath);
 
     $(".tdoll_chibi>img,.chibiAnimationContainer>img").attr("src", chibiPath);
 
}
 
}
−
 
  
 
})
 
})
 
</script></includeonly>
 
</script></includeonly>

2021年10月27日 (三) 13:01的最新版本

取自“https://www.gfwiki.org/index.php?title=Widget:Costume/js&oldid=98752”