|
|
| 第1行： |
第1行： |
| <includeonly><div id="dollPicContain"></div><script type="text/javascript">(window.RLQ=window.RLQ||[]).push(["jquery",function(){ | | <includeonly><script> |
| if(location.hash.indexOf("MOD")>-1){var posit=1}else{var posit=0}
| | (function() { |
| var firstload = false;
| | document.addEventListener('DOMContentLoaded', function() { |
| var dollvoice = "<!--{$dollvoice|escape:'html'}-->"
| | // 获取所有信息框 |
| var dollname = "[ <!--{$dollname|escape:'html'}--> ]";
| | var infoboxes = document.querySelectorAll('.gf-infobox-new'); |
| 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(); | | infoboxes.forEach(function(infobox) { |
| });
| | var thumbItems = infobox.querySelectorAll('.gf-thumb-item'); |
| }
| | var imageContainer = infobox.querySelector('.gf-image-container'); |
| skin_switch_btn_event("#dollSkinSwitchBtnDestroy");
| | var currentImage = imageContainer ? imageContainer.querySelector('img') : null; |
| | | |
| // doll img switch function
| | if (!thumbItems.length || !imageContainer) return; |
| 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
| | thumbItems.forEach(function(thumb) { |
| | thumb.addEventListener('click', function() { |
| | // 移除所有active状态 |
| | thumbItems.forEach(function(t) { |
| | t.classList.remove('active'); |
| | }); |
| | |
| | // 添加当前active状态 |
| | this.classList.add('active'); |
| | |
| | // 获取图片地址 |
| | var imgSrc = this.getAttribute('data-img'); |
| | |
| | // 创建新图片元素 |
| | var newImg = document.createElement('img'); |
| | newImg.src = imgSrc; |
| | newImg.alt = '角色立绘'; |
| | newImg.style.maxWidth = '100%'; |
| | newImg.style.maxHeight = '400px'; |
| | newImg.style.objectFit = 'contain'; |
| | |
| | // 淡入效果 |
| | newImg.style.opacity = '0'; |
| | newImg.style.transition = 'opacity 0.3s ease'; |
| | |
| | // 替换图片 |
| | imageContainer.innerHTML = ''; |
| | imageContainer.appendChild(newImg); |
| | |
| | // 触发重排后执行淡入 |
| | setTimeout(function() { |
| | newImg.style.opacity = '1'; |
| | }, 50); |
| | }); |
| | }); |
| }); | | }); |
| $("#dollPicDiv").mousemove(function(event){
| | }); |
| if(pic_on_dragging){
| | })(); |
| pic_position_after.x = event.clientX;
| | </script></includeonly> |
| 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:GF立绘切换}}</noinclude>
| |