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

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

来自少前百科GFwiki
跳转至： 导航、 搜索
（add switch animate）
 
（未显示同一用户的12个中间版本）
第18行： 第18行：
 
let width = window.innerWidth;
 
let width = window.innerWidth;
 
if(width > height) $("#suitdiv").height(height - 40);
 
if(width > height) $("#suitdiv").height(height - 40);
 +
if(width > height) $("#skinImgDiv").width(height - 40);
 +
else{ $("#skinImgDiv").width(width - 40); $("#skinImgDiv").height(width - 40);}
  
−
var picstate = 0; // 0：正常 1：重创
+
var picState = 0; // 0：正常 1：重创
−
var loadstate = 0;
+
var picIndex = 0; // 当前选择的立绘Index
  
−
loadcreat("pic0");
+
loadcreat();
−
loadcreat("pic1");
+
function loadcreat(){
−
function loadcreat(pic){
 
 
     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($(this).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({"color":"#f4c430"});
 
−
    $("#destroybtn").css({"color":"#eaeaea"});
 
−
   $(".picn").stop().animate({"left":"0px"}, 200);
 
−
    picchange(Number($("#thepic").attr("number")) - 1);
 
−
});
 
−
$("#destroybtn").click(function(){
 
−
    if(picstate == 1) return;
 
−
    picstate = 1;
 
−
    $("#destroybtn").css({"color":"#f4c430"});
 
−
    $("#normalbtn").css({"color":"#eaeaea"});
 
−
   $(".picn").stop().animate({"left":"-100%"}, 200);
 
−
    picchange(Number($("#thepic").attr("number")) - 1);
 
−
});
 
−
$("#normalbtn").css({"color":"#f4c430"});
 
−
 
 
−
$("#hidebtn").attr("state", "0");
 
−
$("#hidebtn").click(function(){
 
−
    if($("#hidebtn").attr("state") == "0"){
 
−
        $(this).css({"color":"#f4c430"});
 
−
        $(this).attr("state", "1");
 
−
        $("#picsdiv").fadeOut(100);
 
−
    } else {
 
−
        $(this).css({"color":"#eaeaea"});
 
−
        $(this).attr("state", "0");
 
−
        $("#picsdiv").fadeIn(100);
 
−
    }
 
−
});
 
−
 
 
−
$("#leftbtn").click(function(){
 
−
    let thisnum = Number($("#thepic").attr("number"));
 
−
    let nextnum = thisnum - 1;
 
−
    if(thisnum <= 1) nextnum = picarr.length;
 
−
 
 
−
    $("#thepic").attr("number", nextnum);
 
−
    $(picndiv[nextnum - 1]).click();
 
−
});
 
−
$("#rightbtn").click(function(){
 
−
    let thisnum = Number($("#thepic").attr("number"));
 
−
    let nextnum = thisnum + 1;
 
−
    if(thisnum >= picarr.length) nextnum = 1;
 
−
 
 
−
    $("#thepic").attr("number", nextnum);
 
−
    $(picndiv[nextnum - 1]).click();
 
−
});
 
−
$("#switchbtn").click(function(){
 
−
    if(picstate == 0) $("#destroybtn").click();
 
−
    else $("#normalbtn").click();
 
−
});
 
−
 
 
−
//人形装扮选择
 
−
var namediv = document.querySelectorAll(".skinname");
 
−
for(let i = 0; i < namediv.length; i++){
 
−
    let text = `<div class="skinnamedoll">` + picarr[i].doll + `<\/div><div class="skinnameskin">` + picarr[i].name + `<\/div>`;
 
−
    $(namediv[i]).html(text);
 
−
}
 
  
−
var picndiv = document.querySelectorAll(".picndiv");
 
−
for(let i = 0; i < picndiv.length; i++){
 
−
    $(picndiv[i]).attr("number", i + 1);
 
−
}
 
 
$(".picndiv").click(function(){
 
$(".picndiv").click(function(){
 
     $("img.picn").css("border-top", "4px solid #eaeaea");
 
     $("img.picn").css("border-top", "4px solid #eaeaea");
第122行： 第54行：
 
     $(this).children(".skinname").children("div").css({"color":"#000000"});
 
     $(this).children(".skinname").children("div").css({"color":"#000000"});
  
−
     $("#thepic").attr("number", $(this).attr("number"));
+
     picIndex = $(this).attr("index");
−
     skinchange(Number($(this).attr("number")) - 1);
+
     skinChange(Number($(this).attr("index")));
 
});
 
});
−
$(picndiv[0]).click();
+
$(picnDiv[0]).click();
  
−
//装扮切换
+
$("#thepic").click(function(event){
−
function skinchange(num){
+
     let relative_x = event.offsetX;
−
     picchange(num);
+
     let pic_width = $(this).width();
−
     spinechange(num);
 
  
−
     $("#skininfodoll").html(picarr[num].doll);
+
     if(relative_x < pic_width / 4) skinPrev();
−
     $("#skininfoname").html(picarr[num].name);
+
    else if(relative_x > pic_width / 4 * 3) skinNext();
−
     $("#skindollline").html(picarr[num].line);
+
    else skinStateSwitch();
 +
});
 +
 
 +
// 装扮切换的函数 分别处理立绘、spine、人形、装扮名称、台词
 +
function skinNext(){
 +
     let nextNum = Number(picIndex) + 1;
 +
    if(picIndex >= picarr.length - 1) nextNum = 0;
 +
     $(picnDiv[nextNum]).click();
 
}
 
}
−
function picchange(num){
+
 
 +
function skinPrev(){
 +
    let prevNum = picIndex - 1;
 +
    if(picIndex <= 0) prevNum = picarr.length - 1;
 +
    $(picnDiv[prevNum]).click();
 +
}
 +
 
 +
function skinStateSwitch(){
 +
    picState = (picState) ? 0 : 1;
 +
    skinChange("skinStateSwitch");
 +
}
 +
 
 +
function skinChange(mode){
 +
    picChange();
 +
   if(mode != "skinStateSwitch")spineChange();
 +
    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 picChange(){
 
     $("#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);
第146行： 第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);
第155行： 第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].code + `"></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].code + `"></option>`;
 
−
}
 
 
html_str += `</select>`;
 
html_str += `</select>`;
  

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

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