微件:Charafig
<style>
.chara-fig-container {
position: relative;
}
.chara-fig-figure-container {
position: relative;
overflow: hidden;
width: 1024px;
height: 768px;
}
.chara-fig-figure {
position: relative;
width: 1024px;
height: 768px;
background-color: #fff;
overflow: hidden;
transform-origin: 0 0;
}
.chara-fig-head-selector-dropdown {
position: relative;
top: 0;
left: 0;
z-index: 1;
}
.chara-fig-head-reset-btn {
position: absolute;
top: 0;
left: 120px;
z-index: 1;
}
.chara-fig-slide-container {
position: absolute;
top: 0;
left: 240px;
z-index: 1;
}
.chara-fig-head-selector-content {
display: none;
position: absolute;
background: white;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
max-height: 600px;
overflow-y: scroll;
z-index: 2;
}
.chara-fig-head-selector-btn,
.chara-fig-head-reset-btn {
background-color: #36c;
color: white;
padding: 8px 16px;
font-size: 16px;
border: double;
cursor: pointer;
}
.chara-fig-head-selector-dropdown:hover .chara-fig-head-selector-btn,
.chara-fig-head-reset-btn:hover {
background-color: #447ff5;
}
.chara-fig-head {
position: absolute;
width: 256px;
height: 256px;
overflow: hidden;
}
.chara-fig-head-selector-container {
position: relative;
width: 512px;
overflow: hidden;
background-size: 100%;
}
.chara-fig-head-selector {
position: absolute;
width: 128px;
height: 128px;
}
.chara-fig-head-selector:hover {
box-sizing: border-box;
border: solid 4px #2196f3;
}
.head-selector-row-0,
.head-selector-row-1 {
top: 0px;
}
.head-selector-row-2 {
top: 128px;
}
.head-selector-row-3 {
top: 256px;
}
.head-selector-row-4 {
top: 384px;
}
.head-selector-col-1 {
left: 0px;
}
.head-selector-col-2 {
left: 128px;
}
.head-selector-col-3 {
left: 256px;
}
.head-selector-col-4 {
left: 384px;
}
</style>
<button class="chara-fig-head-selector-btn">切换表情</button>
<button class="chara-fig-head-reset-btn">重置表情</button>
<script>
window.onload = function headSelectorCreate() {
picList = new Array(, , , , );
htmlHeadSelector = ;
for (var i = 1; i <= 4; i++) {
if (i <= ){
htmlHeadSelector = htmlHeadSelector + '
<' + '/div>';
}
}
document.getElementById("cfsc--1").innerHTML = htmlHeadSelector;
for (var n = 2; n <= 4; n++) {
if (((n * 16) - 12) <= ){
document.getElementById("cfs-").innerHTML = document.getElementById("cfs-").innerHTML + '<' + '/div>';
htmlHeadSelector = ;
for (var m = 1; m <= 4; m++) {
for (var i = 1; i <= 4; i++) {
if ((n * 16) + (m * 4) + i - 32 <= ){
htmlHeadSelector = htmlHeadSelector + '<' + '/div>';
}
}
}
document.getElementById("cfsc--" + n).innerHTML = htmlHeadSelector;
}
else if (((n * 16) - 28) <= ) {
document.getElementById("cfs-").innerHTML = document.getElementById("cfs-").innerHTML + '<' + '/div>';
htmlHeadSelector = ;
for (var m = 1; m <= 4; m++) {
for (var i = 1; i <= 4; i++) {
if ((n * 16) + (m * 4) + i - 32 <= ){
htmlHeadSelector = htmlHeadSelector + '<' + '/div>';
}
}
}
document.getElementById("cfsc--" + n).innerHTML = htmlHeadSelector;
}
}
$("#cf- .head-selector-container-1 .chara-fig-head-selector").on("click", function() {
$("#cf- #chara-fig-head").css("background-image", "url(//media.fgo.wiki/wiki/uk/CharaFigures/.png)");
}); $("#cf- .head-selector-container-2 .chara-fig-head-selector").on("click", function() {
$("#cf- #chara-fig-head").css("background-image", "url(//media.fgo.wiki/wiki/uk/CharaFigures/.png)");
}); $("#cf- .head-selector-container-3 .chara-fig-head-selector").on("click", function() {
$("#cf- #chara-fig-head").css("background-image", "url(//media.fgo.wiki/wiki/uk/CharaFigures/.png)");
}); $("#cf- .head-selector-container-4 .chara-fig-head-selector").on("click", function() {
$("#cf- #chara-fig-head").css("background-image", "url(//media.fgo.wiki/wiki/uk/CharaFigures/.png)");
}); $("#cf- .head-selector-col-1").on("click", function() {
$("#cf- #chara-fig-head").css("background-position-x", "0px");
}); $("#cf- .head-selector-col-2").on("click", function() {
$("#cf- #chara-fig-head").css("background-position-x", "-256px");
}); $("#cf- .head-selector-col-3").on("click", function() {
$("#cf- #chara-fig-head").css("background-position-x", "-512px");
}); $("#cf- .head-selector-col-4").on("click", function() {
$("#cf- #chara-fig-head").css("background-position-x", "-768px");
}); $("#cf- .head-selector-row-1").on("click", function() {
$("#cf- #chara-fig-head").css("background-position-y", "0px");
}); $("#cf- .head-selector-row-2").on("click", function() {
$("#cf- #chara-fig-head").css("background-position-y", "-256px");
}); $("#cf- .head-selector-row-3").on("click", function() {
$("#cf- #chara-fig-head").css("background-position-y", "-512px");
}); $("#cf- .head-selector-row-4").on("click", function() {
$("#cf- #chara-fig-head").css("background-position-y", "-768px");
}); $("#cf- .head-selector-row-0").on("click", function() {
$("#cf- #chara-fig-head").css("background-position-y", "-768px");
}); $("#cf- .chara-fig-head-reset-btn").on("click", function() {
$("#cf- #chara-fig-head").css("background-image", "url(//media.fgo.wiki/wiki/uk/CharaFigures/.png)");
$("#cf- #chara-fig-head").css("background-position", "-px -px");
$("#cfs-").css("display", "none");
}); $("#chara-fig-slider-").on("change", function() {
$("#cf- .chara-fig-figure-container").css({"width": (1024 * ($("#chara-fig-slider-").val() / 100)) + "px", "height": (768 * ($("#chara-fig-slider-").val() / 100)) + "px"});
$("#cf- .chara-fig-figure").css("transform", "scale3d(" + ($("#chara-fig-slider-").val() / 100) + "," + ($("#chara-fig-slider-").val() / 100) + ",1)");
$("#cfs-").css("display", "none");
}); $("#cf- .chara-fig-head-selector-btn").on("click", function() {
$("#cfs-").css("display", "block");
}); $("#cfs-").on("click", function() {
$("#cfs-").css("display", "none");
});
}
</script>