Widget:GF立绘切换：修订间差异
来自OGAS数据中枢
更多操作
无编辑摘要 |
无编辑摘要 |
||
| 第1行： | 第1行： | ||
< | <includeonly><div id="dollPicContain"></div><script type="text/javascript">(window.RLQ=window.RLQ||[]).push(["jquery",function(){ | ||
<div> | if(location.hash.indexOf("MOD")>-1){var posit=1}else{var posit=0} | ||
< | var firstload = false; | ||
var dollvoice = "<!--{$dollvoice|escape:'html'}-->" | |||
var dollname = "[ <!--{$dollname|escape:'html'}--> ]"; | |||
var pic_data = []; | |||
<!--{if ($pic1)}-->pic_data.push({name:"<!--{$pic1name|escape:'html'}-->", line:"<!--{$line1|escape:'html'}-->", pic:"<!--{$pic1|escape:'html'}-->", pic_d:"<!--{$pic1d|escape:'html'}-->", anime:"<!--{$pic1a|escape:'html'}-->", pic_h:"<!--{$pic1h|escape:'html'}-->", pic_d_h:"<!--{$pic1dh|escape:'html'}-->"});<!--{/if}--> | |||
<!--{if ($pic2)}-->pic_data.push({name:"<!--{$pic2name|escape:'html'}-->", line:"<!--{$line2|escape:'html'}-->", pic:"<!--{$pic2|escape:'html'}-->", pic_d:"<!--{$pic2d|escape:'html'}-->", anime:"<!--{$pic2a|escape:'html'}-->", pic_h:"<!--{$pic2h|escape:'html'}-->", pic_d_h:"<!--{$pic2dh|escape:'html'}-->"});<!--{/if}--> | |||
<!--{if ($pic3)}-->pic_data.push({name:"<!--{$pic3name|escape:'html'}-->", line:"<!--{$line3|escape:'html'}-->", pic:"<!--{$pic3|escape:'html'}-->", pic_d:"<!--{$pic3d|escape:'html'}-->", anime:"<!--{$pic3a|escape:'html'}-->", pic_h:"<!--{$pic3h|escape:'html'}-->", pic_d_h:"<!--{$pic3dh|escape:'html'}-->"});<!--{/if}--> | |||
<!--{if ($pic4)}-->pic_data.push({name:"<!--{$pic4name|escape:'html'}-->", line:"<!--{$line4|escape:'html'}-->", pic:"<!--{$pic4|escape:'html'}-->", pic_d:"<!--{$pic4d|escape:'html'}-->", anime:"<!--{$pic4a|escape:'html'}-->", pic_h:"<!--{$pic4h|escape:'html'}-->", pic_d_h:"<!--{$pic4dh|escape:'html'}-->"});<!--{/if}--> | |||
<!--{if ($pic5)}-->pic_data.push({name:"<!--{$pic5name|escape:'html'}-->", line:"<!--{$line5|escape:'html'}-->", pic:"<!--{$pic5|escape:'html'}-->", pic_d:"<!--{$pic5d|escape:'html'}-->", anime:"<!--{$pic5a|escape:'html'}-->", pic_h:"<!--{$pic5h|escape:'html'}-->", pic_d_h:"<!--{$pic5dh|escape:'html'}-->"});<!--{/if}--> | |||
<!--{if ($pic6)}-->pic_data.push({name:"<!--{$pic6name|escape:'html'}-->", line:"<!--{$line6|escape:'html'}-->", pic:"<!--{$pic6|escape:'html'}-->", pic_d:"<!--{$pic6d|escape:'html'}-->", anime:"<!--{$pic6a|escape:'html'}-->", pic_h:"<!--{$pic6h|escape:'html'}-->", pic_d_h:"<!--{$pic6dh|escape:'html'}-->"});<!--{/if}--> | |||
<!--{if ($pic7)}-->pic_data.push({name:"<!--{$pic7name|escape:'html'}-->", line:"<!--{$line7|escape:'html'}-->", pic:"<!--{$pic7|escape:'html'}-->", pic_d:"<!--{$pic7d|escape:'html'}-->", anime:"<!--{$pic7a|escape:'html'}-->", pic_h:"<!--{$pic7h|escape:'html'}-->", pic_d_h:"<!--{$pic7dh|escape:'html'}-->"});<!--{/if}--> | |||
<!--{if ($pic8)}-->pic_data.push({name:"<!--{$pic8name|escape:'html'}-->", line:"<!--{$line8|escape:'html'}-->", pic:"<!--{$pic8|escape:'html'}-->", pic_d:"<!--{$pic8d|escape:'html'}-->", anime:"<!--{$pic8a|escape:'html'}-->", pic_h:"<!--{$pic8h|escape:'html'}-->", pic_d_h:"<!--{$pic8dh|escape:'html'}-->"});<!--{/if}--> | |||
<!--{if ($pic9)}-->pic_data.push({name:"<!--{$pic9name|escape:'html'}-->", line:"<!--{$line9|escape:'html'}-->", pic:"<!--{$pic9|escape:'html'}-->", pic_d:"<!--{$pic9d|escape:'html'}-->", anime:"<!--{$pic9a|escape:'html'}-->", pic_h:"<!--{$pic9h|escape:'html'}-->", pic_d_h:"<!--{$pic9dh|escape:'html'}-->"});<!--{/if}--> | |||
<!--{if ($pic10)}-->pic_data.push({name:"<!--{$pic10name|escape:'html'}-->", line:"<!--{$line10|escape:'html'}-->", pic:"<!--{$pic10|escape:'html'}-->", pic_d:"<!--{$pic10d|escape:'html'}-->", anime:"<!--{$pic10a|escape:'html'}-->", pic_h:"<!--{$pic10h|escape:'html'}-->", pic_d_h:"<!--{$pic10dh|escape:'html'}-->"});<!--{/if}--> | |||
<!--{if ($pic11)}-->pic_data.push({name:"<!--{$pic11name|escape:'html'}-->", line:"<!--{$line11|escape:'html'}-->", pic:"<!--{$pic11|escape:'html'}-->", pic_d:"<!--{$pic11d|escape:'html'}-->", anime:"<!--{$pic11a|escape:'html'}-->", pic_h:"<!--{$pic11h|escape:'html'}-->", pic_d_h:"<!--{$pic11dh|escape:'html'}-->"});<!--{/if}--> | |||
<!--{if ($pic12)}-->pic_data.push({name:"<!--{$pic12name|escape:'html'}-->", line:"<!--{$line12|escape:'html'}-->", pic:"<!--{$pic12|escape:'html'}-->", pic_d:"<!--{$pic12d|escape:'html'}-->", anime:"<!--{$pic12a|escape:'html'}-->", pic_h:"<!--{$pic12h|escape:'html'}-->", pic_d_h:"<!--{$pic12dh|escape:'html'}-->"});<!--{/if}--> | |||
var homepic = [ | |||
]; | |||
ar initial_scale = ($("#dollPicContain").width()< $("#dollPicContain").height()) ? (1.5 * $("#dollPicContain").width() / $("#dollPicContain").height()) : 1.5; | |||
var initial_x = ($("#dollPicContain").width() - $("#dollPicContain").height() * initial_scale) / 2; | |||
var initial_y = (initial_scale > 1) ? 0 : ($("#dollPicContain").height() * (1 - initial_scale) / 2); | |||
const initial_para = {x: initial_x, y: initial_y, scale: initial_scale} | |||
var pic_position_before = {x: 0, y: 0}; | |||
var pic_position_after = {x: 0, y: 0}; | |||
var pic_position_change = {x: 0, y: 0}; | |||
var pic_move = {x: initial_para.x, y: initial_para.y}; | |||
var pic_on_dragging = false; | |||
var pic_scale = initial_para.scale; | |||
creat_doll_div(); | |||
function stop() {return false;} | |||
document.getElementById("dollPicContain").oncontextmenu = stop; | |||
function load_pics(){ | |||
for(i in pic_data){ | |||
var img = new Image(); | |||
$(img).attr({"src": pic_data[i]["pic"]}); | |||
var img_2 = new Image(); | |||
$(img_2).attr({"src": pic_data[i]["pic_d"]}); | |||
var img_3 = new Image(); | |||
$(img_3).attr({"src": pic_data[i]["pic_h"]}); | |||
var img_4 = new Image(); | |||
$(img_4).attr({"src": pic_data[i]["pic_d_h"]}); | |||
} | |||
} | |||
function creat_doll_div(){ | |||
let html_text = ` | |||
<div id="dollPicDiv"> | |||
<div id="dollPicBg"><\/div> | |||
<img id="dollPicImg" src=${pic_data[posit]["pic"]} \/> | |||
<div id="dollControlBtn"> | |||
<div id="dollDragBtn" class="dollPicBtn" state="off"><\/div> | |||
<div id="dollPicPositionRe" class="dollPicBtn"><\/div> | |||
<div id="dollPicDownload" class="dollPicBtn"> | |||
<a target="_blank" href=${pic_data[0]["pic"]} \/> | |||
<\/div> | |||
<div id="dollPicExpand" class="dollPicBtn" state="off"><\/div> | |||
<\/div> | |||
<div id="dollLineDiv"><div id="dollLineName">${dollname}<\/div>${(dollvoice.length > 5) ? `<div id="dollLineVoice">[ ▶ ]<\/div>` : ``}<div id="dollLineWord">${pic_data[0]["line"]}<\/div> | |||
<\/div> | |||
<\/div>`; | |||
$("#dollPicContain").append(html_text); | |||
pic_position_reset(0); | |||
// switch skins need this button | |||
let skin_btn_text = `<div id="dollSkinBtnDiv">`; | |||
for(i in pic_data){ | |||
if(i == posit) skin_btn_text += `<div class="dollSkinBtn skinChosen" index="${i}" >${pic_data[i]["name"]}`; | |||
else skin_btn_text += `<div class="dollSkinBtn" index="${i}" >${pic_data[i]["name"]}`; | |||
if(Number(pic_data[i]["anime"]) == 0) skin_btn_text += `<\/div>`; | |||
else if(Number(pic_data[i]["anime"]) == 1) skin_btn_text += `<div class="dollSkinAnimeL"><\/div><\/div>`; | |||
else if(Number(pic_data[i]["anime"]) == 2) skin_btn_text += `<div class="dollSkinAnimeA"><\/div><\/div>`; | |||
} | |||
skin_btn_text += `<div id="dollSkinBtnSpace"><\/div>`; | |||
skin_btn_text+=`<div id="dollSkinSwitchBtnDestroy" class="dollSkinSwitchBtn" dict="Normal-Destroy" state="Normal"> | |||
<div class="dollSkinSwitchBtnSlide"><\/div> | |||
<div id="dollSkinSwitchNormal" class="dollSkinSwitchBtnL">正常<\/div> | |||
<div id="dollSkinSwitchDestroy" class="dollSkinSwitchBtnR">重创<\/div> | |||
<\/div>`; | |||
if(pic_data[0]["pic_h"]){ | |||
skin_btn_text+=`<div id="dollSkinSwitchBtnHexie" class="dollSkinSwitchBtn" dict="Formal-Hexie" state="Formal"> | |||
<div class="dollSkinSwitchBtnSlide"><\/div> | |||
<div id="dollSkinSwitchFormal" class="dollSkinSwitchBtnL">正式<\/div> | |||
<div id="dollSkinSwitchHexie" class="dollSkinSwitchBtnR">和谐<\/div> | |||
<\/div>`; | |||
skin_btn_text += `<\/div>`; | |||
} else skin_btn_text += `<\/div>`; | |||
$("#dollPicDiv").append(skin_btn_text); | |||
skin_switch_btn_event("#dollSkinSwitchBtnHexie"); | |||
skin_btn_size(); | |||
// creat the select to offer changing home background options | |||
let select_text = `<select id="dollHomePic" style="display:none;"><\/select><div id="dollHomeDiv" class="dollPicBtn" state="off"><\/div>`; | |||
$("#dollPicDiv").append(select_text); | |||
for(i in homepic){ | |||
let option_text = `<option value=${homepic[i].pic}>${homepic[i].name}<\/option>`; | |||
$("#dollHomePic").append(option_text); | |||
} | |||
$("#dollHomePic").change(function(){ $("#dollPicBg").css({"background-image": "url(" + this.value + ")"}); }); | |||
} | |||
// if there is lots of skin, make it smaller to contain them all in the div. | |||
function skin_btn_size(){ | |||
if(pic_data.length >= 8 && $("#dollPicExpand").attr("state") == "off"){ | |||
let long = (16 - pic_data.length)< 2 ? 2 : 16 - pic_data.length; | |||
let margin_long = (30 - ((pic_data.length - 6) > 10 ? 10 : (pic_data.length - 6)) * 3); | |||
$(".dollSkinBtn").css({"padding": long + "px 2px", "margin": long + "px 0px"}); | |||
$("#dollSkinSwitchBtn").css({"margin-top": margin_long + "px"}); | |||
} | |||
} | |||
// the skin btn are so tight and ugly. undo. | |||
function un_skin_btn_size(){ | |||
if(pic_data.length<= 13){ | |||
$(".dollSkinBtn").css({"padding": "", "margin": ""}); | |||
$("#dollSkinSwitchBtn").css({"margin-top": ""}); | |||
} | |||
} | |||
// show dollHomePic select show or hide @click | |||
$("#dollHomeDiv").click(function(){ | |||
if($(this).attr("state") == "off"){ | |||
$(this).attr("state", "on"); | |||
$(this).css({"background-image": "url(/images/9/97/Home_hide.png)"}); | |||
$(this).prev("#dollHomePic").fadeIn(50); | |||
$(this).prev("#dollHomePic").animate({"width": "150px", "right": "50px"}, 200); | |||
} else { | |||
$(this).attr("state", "off"); | |||
$(this).css({"background-image": "url(/images/0/03/Home_show.png)"}); | |||
$(this).prev("#dollHomePic").fadeOut(150); | |||
$(this).prev("#dollHomePic").animate({"width": "40px", "right": "10px"}, 200); | |||
} | |||
}); | |||
// play voice | |||
if(dollvoice.length > 5){ | |||
var voice_jp = new Audio; | |||
voice_jp.setAttribute("src", dollvoice); | |||
voice_jp.setAttribute("controls", "controls"); | |||
voice_jp.setAttribute("preload", "preload"); | |||
$("#dollLineVoice").click(function(){ | |||
voice_jp.currentTime = 0; | |||
voice_jp.play(); | |||
}); | |||
} | |||
// skin chose button @click | |||
$(".dollSkinBtn").click(function(){ | |||
if(!firstload) load_pics(); | |||
$(".dollSkinBtn").removeClass("skinChosen"); | |||
$(this).addClass("skinChosen"); | |||
if($(this).text().indexOf("默认立绘") != -1 || $(this).text().indexOf("心智升级") != -1) $("#dollLineVoice").show(); | |||
else $("#dollLineVoice").hide(); | |||
let index = Number($(this).attr("index")); | |||
$("#dollLineWord").stop().fadeOut(90); | |||
setTimeout(() => { $("#dollLineWord").html(pic_data[index]["line"]); }, 95); | |||
setTimeout(() => { $("#dollLineWord").stop().fadeIn(100); }, 100); | |||
$("#dollSkinSwitchBtnHexie").remove(); | |||
if(pic_data[index]["pic_h"]){ | |||
skin_btn_text =`<div id="dollSkinSwitchBtnHexie" class="dollSkinSwitchBtn" dict="Formal-Hexie" state="Formal"> | |||
<div class="dollSkinSwitchBtnSlide"><\/div> | |||
<div id="dollSkinSwitchFormal" class="dollSkinSwitchBtnL">正式<\/div> | |||
<div id="dollSkinSwitchHexie" class="dollSkinSwitchBtnR">和谐<\/div> | |||
<\/div>`; | |||
$("#dollSkinBtnDiv").append(skin_btn_text); | |||
skin_switch_btn_event("#dollSkinSwitchBtnHexie"); | |||
skin_btn_size(); | |||
} | |||
doll_img_switch(); | |||
}); | |||
// hexie/destroy skin chose button @click | |||
function skin_switch_btn_event(target){ | |||
if(!target && !firstload) load_pics(); | |||
if(!target) target = ".dollSkinSwitchBtn"; | |||
$(target).click(function(){ | |||
let status = $(this).attr("dict").split("-"); | |||
if($(this).attr("state") == status[0]){ | |||
$(this).attr("state", status[1]); | |||
$(this).children(".dollSkinSwitchBtnSlide").stop().animate({"right": "0px", "left": "50%"}, 300); | |||
setTimeout(() => { | |||
$(this).children(".dollSkinSwitchBtnL").css({"color": "#eaeaea"}); | |||
$(this).children(".dollSkinSwitchBtnR").css({"color": "#292929"}); | |||
}, 100); | |||
} else { | |||
$(this).attr("state", status[0]); | |||
$(this).children(".dollSkinSwitchBtnSlide").stop().animate({"left": "0px", "right": "50%"}, 300); | |||
setTimeout(() => { | |||
$(this).children(".dollSkinSwitchBtnL").css({"color": "#292929"}, 300); | |||
$(this).children(".dollSkinSwitchBtnR").css({"color": "#eaeaea"}, 300); | |||
}, 100); | |||
} | |||
doll_img_switch(); | |||
}); | |||
} | |||
skin_switch_btn_event("#dollSkinSwitchBtnDestroy"); | |||
// doll img switch function | |||
function doll_img_switch(){ | |||
let index = Number($($(".skinChosen")[0]).attr("index")); | |||
let hex_state = "Formal"; | |||
if($("#dollSkinSwitchBtnHexie")) hex_state = $("#dollSkinSwitchBtnHexie").attr("state"); | |||
let des_state = $("#dollSkinSwitchBtnDestroy").attr("state"); | |||
let target = {"pic": pic_data[index]["pic"], "pic_d": pic_data[index]["pic_d"]}; | |||
if(hex_state == "Hexie") target = {"pic": pic_data[index]["pic_h"], "pic_d": pic_data[index]["pic_d_h"]}; | |||
let target_src = target["pic"]; | |||
if(des_state == "Destroy") target_src = target["pic_d"]; | |||
$("#dollPicDownload").children("a").attr("href", target_src); | |||
$("#dollPicImg").stop().fadeOut(190); | |||
setTimeout(() => { $("#dollPicImg").attr("src", ""); $("#dollPicImg").attr("src", target_src); }, 195); | |||
setTimeout(() => { $("#dollPicImg").stop().fadeIn(200); }, 200); | |||
} | |||
$("#dollPicImg").click(function(){ $("#dollDragBtn").click();}); | |||
// drag and scale mode switch button @click | |||
$("#dollDragBtn").click(function(){ | |||
if($(this).attr("state") == "off"){ | |||
$(this).attr("state", "on"); | |||
$(this).css("background-image", "url(/images/a/ad/IconDollDigoutUn.png)"); | |||
$("#dollPicImg").css("cursor", "crosshair"); | |||
$("#dollPicBg").css("cursor", "crosshair"); | |||
$("#dollPicImg").unbind("click"); | |||
// animation for hiding buttons | |||
$("#dollSkinBtnDiv").stop().animate({"left": "-200px"}, 500); | |||
$("#dollLineDiv").stop().animate({"bottom": "-200px"}, 500); | |||
if($("#dollHomeDiv").attr("state") == "on") $("#dollHomeDiv").click(); | |||
$("#dollPicDiv").mousedown(function(event){ | |||
pic_on_dragging = true; | |||
pic_position_before.x = event.clientX; | |||
pic_position_before.y = event.clientY; | |||
pic_position_change.x = 0 | |||
pic_position_change.y = 0 | |||
}); | |||
$("#dollPicDiv").mousemove(function(event){ | |||
if(pic_on_dragging){ | |||
pic_position_after.x = event.clientX; | |||
pic_position_after.y = event.clientY; | |||
pic_move.x += pic_position_after.x - pic_position_before.x; | |||
pic_move.y += pic_position_after.y - pic_position_before.y; | |||
pic_position_change.x += pic_position_after.x - pic_position_before.x; | |||
pic_position_change.y += pic_position_after.y - pic_position_before.y; | |||
pic_position_before.x = pic_position_after.x; | |||
pic_position_before.y = pic_position_after.y; | |||
$("#dollPicImg").css("top", String(pic_move.y) + "px"); | |||
$("#dollPicImg").css("left", String(pic_move.x) + "px"); | |||
} | |||
}); | |||
$("#dollPicDiv").mouseup(function(){ | |||
pic_on_dragging = false; | |||
}); | |||
// this for click and trigger the dragbtn | |||
$("#dollPicImg").click(function(){ | |||
if(pic_position_change.x == 0 && pic_position_change.y == 0 && $("#dollDragBtn").attr("state") == "on") $("#dollDragBtn").click(); | |||
pic_position_change.x = 0 | |||
pic_position_change.y = 0 | |||
}); | |||
if(document.querySelector("#dollPicDiv").addEventListener){ | |||
document.querySelector("#dollPicDiv").addEventListener('wheel', doll_pic_scale); | |||
} | |||
} else { | |||
$(this).attr("state", "off"); | |||
$(this).css("background-image", "url(/images/7/7d/IconDollDigout.png)"); | |||
if($("#dollPicExpand").attr("state") == "off") $("body").css("overflow", "auto"); | |||
$("#dollPicImg").css("cursor", "auto"); | |||
$("#dollPicBg").css("cursor", "auto"); | |||
// animation for hiding buttons | |||
if(window.innerWidth<= 600) $("#dollSkinBtnDiv").stop().animate({"left": "2px"}, 500); | |||
else $("#dollSkinBtnDiv").stop().animate({"left": "15px"}, 500); | |||
$("#dollHomePic").stop().animate({"right": "2px"}, 500); | |||
$("#dollLineDiv").stop().animate({"bottom": "20px"}, 500); | |||
document.querySelector("#dollPicDiv").removeEventListener("wheel", doll_pic_scale); | |||
$("#dollPicDiv").unbind("mousedown").unbind("mousemove").unbind("mouseup"); | |||
setTimeout(function(){ | |||
$("#dollPicImg").click(function(){ $("#dollDragBtn").click();}); | |||
}, 100); | |||
} | |||
}); | |||
// for a easy and feasible way to remove eventListener @mousewheel | |||
function doll_pic_scale(event){ | |||
event.preventDefault(); | |||
var box = document.querySelector("#dollPicImg").getBoundingClientRect(); | |||
event.wheelDelta = event.wheelDelta ? event.wheelDelta : (event.deltalY * (-40)); | |||
if (event.wheelDelta > 0) { | |||
pic_scale += 0.1; | |||
if(pic_scale >= 10) pic_scale = 10; | |||
parament = pic_scale / (pic_scale - 0.1) - 1; | |||
pic_move["x"] = pic_move["x"] - (event.clientX - box.left) * parament; | |||
pic_move["y"] = pic_move["y"] - (event.clientY - box.top) * parament; | |||
} else { | |||
pic_scale -= 0.1; | |||
if(pic_scale<= 0.2) pic_scale = 0.2; | |||
parament = pic_scale / (pic_scale + 0.1) - 1; | |||
pic_move["x"] = pic_move["x"] - (event.clientX - box.left) * parament; | |||
pic_move["y"] = pic_move["y"] - (event.clientY - box.top) * parament; | |||
} | |||
$("#dollPicImg").css("top", String(pic_move["y"]) + "px"); | |||
$("#dollPicImg").css("left", String(pic_move["x"]) + "px"); | |||
$("#dollPicImg").css("height", String(100 * pic_scale) + "%"); | |||
} | |||
// reset the position of pic, and paramas reinitial (different between expanded or not) @click | |||
$("#dollPicPositionRe").click(function(){pic_position_reset(100)}); | |||
// to move the pic to the right position, creat a function | |||
function pic_position_reset(time){ | |||
if($("#dollPicExpand").attr("state") == "off"){ | |||
let target_width = ($("#dollPicContain").width()< 200) ? window.innerWidth - 20 : $("#dollPicContain").width(); | |||
let initial_scale = (target_width< $("#dollPicContain").height()) ? (1.5 *target_width / $("#dollPicContain").height()) : 1.5; | |||
let initial_x = (target_width - $("#dollPicContain").height() * initial_scale) / 2; | |||
let initial_y = (initial_scale > 1) ? 0 : ($("#dollPicContain").height() * (1 - initial_scale) / 2); | |||
pic_move = {x: initial_x, y: initial_y}; | |||
pic_scale = initial_scale; | |||
} else { | |||
pic_scale = (window.innerWidth< window.innerHeight) ? (window.innerWidth / window.innerHeight) : 1; | |||
pic_move.x = (pic_scale< 1) ? 0 : (window.innerWidth - window.innerHeight) / 2; | |||
pic_move.y = (pic_scale == 1) ? 0 : (window.innerHeight - window.innerWidth) / 2; | |||
} | |||
pic_position_before = {x: 0, y: 0}; | |||
pic_position_after = {x: 0, y: 0}; | |||
$("#dollPicImg").stop().animate({ | |||
"top": String(pic_move["y"]) + "px", | |||
"left": String(pic_move["x"]) + "px", | |||
"height": String(100 * pic_scale) + "%" | |||
}, time); | |||
} | |||
// to expand the dollpicdiv or unexpand, and other measures @click | |||
$("#dollPicExpand").click(function(){ | |||
if($(this).attr("state") == "off"){ | |||
$(this).attr({"state": "on"}); | |||
$(this).css("background-image", "url(/images/e/e1/IconDollExpandUn.png)"); | |||
expand_function(); | |||
} else { | |||
$(this).attr("state", "off"); | |||
$(this).css("background-image", "url(/images/f/f6/IconDollExpand.png)"); | |||
$('#content').css('grid-template-areas', ''); | |||
$('.mw-indicators.mw-body-content').css('display', ''); | |||
$("#dollPicDiv").css({"position": "relative", "border": "", "z-index":""}); | |||
$("#dollPicDiv").stop().animate({"height": $("#dollPicContain").height() + "px", "width": $("#dollPicContain").width() + "px"}, 450); | |||
$("#dollPicPositionRe").click(); | |||
$("#dollPicImg").stop().animate({ | |||
"left": initial_para.x + "px", | |||
"top": initial_para.y + "px", | |||
"height": String(100 * initial_para.scale) + "%"}, 450); | |||
setTimeout(function(){ | |||
$("#mw-navigation").fadeIn(200) | |||
$(".comment-replybox").fadeIn(200) | |||
$("body").css({"overflow": "auto"}); | |||
$(".backToTop").css({"right": ""}); | |||
}, 400); | |||
$("#dollPicPositionRe").click(); | |||
setTimeout(() => { skin_btn_size();}, 450); | |||
} | |||
}); | |||
function expand_function(){ | |||
// some gfwiki'ui is really disgusting, although it's joking, but i need to hide them | |||
$("#mw-navigation").hide(); | |||
$(".comment-replybox").hide(); | |||
$("body").css({"overflow": "hidden"}); | |||
$(".backToTop").css({"right": "-500px"}); | |||
// 隐藏#content的其他子元素以兼容固定H1和TOC的新布局 | |||
$('#content').css('grid-template-areas', '"bc"'); | |||
$('.mw-indicators.mw-body-content').css('display', 'none'); | |||
// main commands to control the div and pic moving | |||
$("#dollPicDiv").css({"position": "fixed", "left": "0px", "top": "0px", "border": "none", "z-index":"100"}); | |||
$("#dollPicDiv").stop().animate({"width": window.innerWidth + "px", "height": window.innerHeight + "px"}, 600); | |||
// although it's not very good, but i made it anyway | |||
var scale = (window.innerWidth< window.innerHeight) ? (window.innerWidth / window.innerHeight) : 1; | |||
var move_x = (scale< 1) ? 0 : (window.innerWidth - window.innerHeight) / 2; | |||
var move_y = (scale== 1) ? 0 : (window.innerHeight - window.innerWidth) / 2; | |||
$("#dollPicPositionRe").click(); | |||
$("#dollPicImg").stop().animate({ "left": move_x + "px", "top": move_y + "px", "height": String(100 * scale) + "%"}, 600); | |||
setTimeout(() => { un_skin_btn_size();}, 600); | |||
} | |||
// if the size of window changed , trigger this | |||
$(window).resize(function() { | |||
if($("#dollPicExpand").attr("state") == "on"){ | |||
expand_function(); | |||
} | |||
}); | |||
}])</script></includeonly><noinclude>{{#widget:DollPage/Pic}}</noinclude> | |||
2026年5月15日 (五) 06:46的版本
小部件DollPage/Pic出错: Unable to load template 'wiki:DollPage/Pic'