| ◆少前百科是非盈利性、非官方的少女前线维基百科。 ◆如果您发现某些内容错误/空缺，请勇于修正/添加！参与进来其实很容易！点这里 加入少前百科。 ◆有任何意见、建议、纠错，欢迎在 GFwiki:反馈与建议 提出和讨论。编辑事务讨论QQ群：597764980，微博@GFwiki少前百科 ◆To foreigners，You can use twitter to contact us. |
|
“Widget:SkinQuery/js”的版本间的差异
（更新） |
（更新） |
||
| 第5行： | 第5行： | ||
creat_anime(); | creat_anime(); | ||
creat_click(); | creat_click(); | ||
| + | creat_album(); | ||
function creat_select(){ | function creat_select(){ | ||
var html_text = ` | var html_text = ` | ||
<div class="skinselectbox"> | <div class="skinselectbox"> | ||
| − | <div class="skinbtn" id="suitmode" state="1">主题模式<\/div> | + | <div class="skinbtnbox"> |
| + | <div class="skinbtn" id="suitmode" state="1">主题模式<\/div> | ||
| + | <\/div><br/> | ||
<div class="skinbtnbox"> | <div class="skinbtnbox"> | ||
<div class="skinsecall">全选<\/div> | <div class="skinsecall">全选<\/div> | ||
| 第254行： | 第257行： | ||
html_text += `<div class="oneskin ` + bcard_class + `"> | html_text += `<div class="oneskin ` + bcard_class + `"> | ||
| − | <div class="skinpicndiv" data- | + | <div class="skinpicndiv" data-pica="${$(suitElement[i]).attr("data-pica" + String(j))}" data-picb="${$(suitElement[i]).attr("data-picb" + String(j))}"> |
<img class="skinpicn" src="` + $(suitElement[i]).attr("data-picn" + String(j)) + `" /><\/div> | <img class="skinpicn" src="` + $(suitElement[i]).attr("data-picn" + String(j)) + `" /><\/div> | ||
<div class="skintext"> | <div class="skintext"> | ||
| − | <div class="skindoll">` + $(suitElement[i]).attr("data-doll" + String(j)) + `<\/div> | + | <div class="skindolllink"> |
| − | + | <div class="skindoll">` + $(suitElement[i]).attr("data-doll" + String(j)) + `<\/div> | |
| + | <div class="skinname">` + $(suitElement[i]).attr("data-name" + String(j)) + `<\/div> | ||
| + | <\/div> | ||
<div class="skinbcard">` + $(suitElement[i]).attr("data-bcard" + String(j)) + `<\/div> | <div class="skinbcard">` + $(suitElement[i]).attr("data-bcard" + String(j)) + `<\/div> | ||
` + gain_text + ` | ` + gain_text + ` | ||
| 第346行： | 第351行： | ||
html_text += `<div class="oneskin ` + bcard_class + `"> | html_text += `<div class="oneskin ` + bcard_class + `"> | ||
| − | <div class="skinpicndiv" data- | + | <div class="skinpicndiv" data-pica="${$(suitElement[i]).attr("data-pica" + String(j))}" data-picb="${$(suitElement[i]).attr("data-picb" + String(j))}"> |
<img class="skinpicn" src="` + $(suitElement[i]).attr("data-picn" + String(j)) + `" /><\/div> | <img class="skinpicn" src="` + $(suitElement[i]).attr("data-picn" + String(j)) + `" /><\/div> | ||
<div class="skintext"> | <div class="skintext"> | ||
| − | <div class="skindoll">` + $(suitElement[i]).attr("data-doll" + String(j)) + `<\/div> | + | <div class="skindolllink" data-dollname="${$(suitElement[i]).attr("data-doll" + String(j))}"> |
| − | + | <div class="skindoll">` + $(suitElement[i]).attr("data-doll" + String(j)) + `<\/div> | |
| + | <div class="skinname">` + $(suitElement[i]).attr("data-name" + String(j)) + `<\/div> | ||
| + | <\/div> | ||
<div class="skinbcard">` + $(suitElement[i]).attr("data-bcard" + String(j)) + `<\/div> | <div class="skinbcard">` + $(suitElement[i]).attr("data-bcard" + String(j)) + `<\/div> | ||
` + gain_text + ` | ` + gain_text + ` | ||
| 第375行： | 第382行： | ||
function creat_click(){ | function creat_click(){ | ||
$('.skinpicndiv').click(function(){ | $('.skinpicndiv').click(function(){ | ||
| + | $("#skinalbum").fadeIn(); | ||
| + | $("#skinalbumpic").attr("data-pica", $(this).attr("data-pica").replace(/ /g, "_")); | ||
| + | $("#skinalbumpic").attr("data-picb", $(this).attr("data-picb").replace(/ /g, "_")); | ||
| + | $("#skinalbumpic").attr("src", $(this).attr("data-pica").replace(/ /g, "_")); | ||
| + | $("#skinalbumpic").attr("state", "a"); | ||
| + | }); | ||
| + | |||
| + | $(".skindolllink").click(function(){ | ||
let doll_link = "http://www.gfwiki.org/w/" + $(this).attr("data-dollname"); | let doll_link = "http://www.gfwiki.org/w/" + $(this).attr("data-dollname"); | ||
window.open(doll_link); | window.open(doll_link); | ||
}); | }); | ||
| − | + | } | |
| + | |||
| + | function creat_album(){ | ||
| + | let html_text = `<div id="skinalbum"> | ||
| + | <img id="skinalbumpic" src="" state="a" \/> | ||
| + | <div class="skinalbumbtn" id="skinalbumswitch">⇵<\/div> | ||
| + | <div class="skinalbumbtn" id="skinalbumclose">×<\/div> | ||
| + | <\/div>`; | ||
| + | |||
| + | let the_width = 1024; | ||
| + | if(window.innerHeight > window.innerWidth) the_width = window.innerWidth; | ||
| + | else the_width = window.innerHeight; | ||
| + | if(the_width > 1024) the_width = 1024; | ||
| + | |||
| + | album_width = String(the_width - 20) + "px"; | ||
| + | pic_width = String(the_width - 40) + "px"; | ||
| + | console.log(album_width, pic_width); | ||
| + | |||
| + | $("#mw-content-text").append(html_text); | ||
| + | |||
| + | $("#skinalbum").css({"width":album_width, "height":album_width, "left":(String((window.innerWidth - the_width + 20)/2) + "px"), "top":(String((window.innerHeight - the_width + 20)/2) + "px")}); | ||
| + | $("#skinalbumpic").css({"width":pic_width, "height":pic_width}); | ||
| + | |||
| + | $("#skinalbumswitch").click(function(){ | ||
| + | if($("#skinalbumpic").attr("state") == "a"){ | ||
| + | $("#skinalbumpic").attr("src", $("#skinalbumpic").attr("data-picb")); | ||
| + | $("#skinalbumpic").attr("state", "b"); | ||
| + | } else { | ||
| + | $("#skinalbumpic").attr("src", $("#skinalbumpic").attr("data-pica")); | ||
| + | $("#skinalbumpic").attr("state", "a"); | ||
| + | } | ||
| + | }); | ||
| + | |||
| + | $("#skinalbumclose").click(function(){ | ||
| + | $("#skinalbum").fadeOut(); | ||
| + | }); | ||
} | } | ||
}) | }) | ||
</script></includeonly> | </script></includeonly> | ||
