Difference between revisions of "Template:BNU-China/Javascript/team"
| Line 46: | Line 46: | ||
temp[1].style.zIndex = -2; | temp[1].style.zIndex = -2; | ||
temp[2].style.zIndex = 3; | temp[2].style.zIndex = 3; | ||
| + | temp[2].style.opacity = 0.4; | ||
temp = teamElem.querySelector(".member-name"); | temp = teamElem.querySelector(".member-name"); | ||
temp.style.display = "none"; | temp.style.display = "none"; | ||
| Line 52: | Line 53: | ||
temp = teamElem.querySelector(".member-cute"); | temp = teamElem.querySelector(".member-cute"); | ||
temp.style.display = "block"; | temp.style.display = "block"; | ||
| + | temp.style.opacity = 1; | ||
| + | temp.style.transition = "opacity 0.8s"; | ||
} | } | ||
function revertImageUp() { | function revertImageUp() { | ||
Latest revision as of 14:51, 23 October 2017
window.onload = function() { var teamElemList = document.getElementsByClassName("team-member"); for(var i = 0;i < teamElemList.length;i ++) { teamElemList[i].addEventListener("mouseover", changeImageOver); teamElemList[i].addEventListener("mouseout", revertImageOut); teamElemList[i].addEventListener("mousedown", changeImageDown); teamElemList[i].addEventListener("mouseup", revertImageUp); teamElemList[i].style.backgroundColor = "#90551e"; } var group = document.querySelector(".group-list"); var groupList = group.children; for(var i =0;i < groupList.length;i ++) { groupList[i].addEventListener("click", displaySelectedGroup); } } function changeImageOver() { var teamElem = this; // teamElem.style.backgroundColor = "#90551e"; teamElem.style.cursor = "pointer"; var temp = teamElem.getElementsByClassName("member-img"); temp[0].style.zIndex = -1; temp[1].style.zIndex = 2; temp[1].style.opacity = 0.4; temp = teamElem.querySelector(".member-intro"); temp.style.display = "block"; temp.style.opacity = 1; temp.style.transition = "opacity 0.8s"; } function revertImageOut() { var teamElem = this; // teamElem.style.backgroundColor = "transparent"; teamElem.style.cursor = "auto"; var temp = teamElem.getElementsByClassName("member-img"); temp[0].style.zIndex = 0; temp[1].style.zIndex = -2; temp = teamElem.querySelector(".member-intro"); temp.style.display = "none"; // temp.style.opacity = 0; // temp.style.transition = "opacity 0s"; } function changeImageDown() { var teamElem = this; // teamElem.style.backgroundColor = "#90551e"; teamElem.style.cursor = "auto"; var temp = teamElem.getElementsByClassName("member-img"); temp[1].style.zIndex = -2; temp[2].style.zIndex = 3; temp[2].style.opacity = 0.4; temp = teamElem.querySelector(".member-name"); temp.style.display = "none"; temp = teamElem.querySelector(".member-intro"); temp.style.display = "none"; temp = teamElem.querySelector(".member-cute"); temp.style.display = "block"; temp.style.opacity = 1; temp.style.transition = "opacity 0.8s"; } function revertImageUp() { var teamElem = this; // teamElem.style.backgroundColor = "transparent"; teamElem.style.cursor = "pointer"; var temp = teamElem.getElementsByClassName("member-img"); temp[1].style.zIndex = 2; temp[2].style.zIndex = -3; temp[1].style.opacity = 0.4; temp = teamElem.querySelector(".member-name"); temp.style.display = "block"; temp = teamElem.querySelector(".member-intro"); temp.style.display = "block"; temp = teamElem.querySelector(".member-cute"); temp.style.display = "none"; } function displaySelectedGroup() { var displayGroupName = this.getAttribute("data-group"); var team = document.querySelector(".team-row"); var teamList = team.children; if(displayGroupName == "all") { for(var i = 0;i < teamList.length;i ++) { teamList[i].style.display = "inline-block"; } } else { for(var i = 0;i < teamList.length;i ++) { teamList[i].style.display = "none"; } var displayGroups = team.getElementsByClassName(displayGroupName); for(var i = 0;i < displayGroups.length;i ++) { displayGroups[i].style.display = "inline-block"; } } }
