Difference between revisions of "Template:BNU-China/Javascript/team"
| Line 28: | Line 28: | ||
for(var i = 0;i < teamElemList.length;i ++) { | for(var i = 0;i < teamElemList.length;i ++) { | ||
imgElem.setAttribute("src", links[teamElemList[i].getAttribute("name")][2]); | imgElem.setAttribute("src", links[teamElemList[i].getAttribute("name")][2]); | ||
| − | teamElemList[i].insertAdjacentHTML("afterbegin", imgElem); | + | teamElemList[i].insertBefore(teamElemList[i].firstElementChild, imgElem); |
| + | // teamElemList[i].insertAdjacentHTML("afterbegin", imgElem); | ||
imgElem.setAttribute("src", links[teamElemList[i].getAttribute("name")][1]); | imgElem.setAttribute("src", links[teamElemList[i].getAttribute("name")][1]); | ||
| − | teamElemList[i]. | + | teamElemList[i].insertBefore(teamElemList[i].firstElementChild, imgElem); |
teamElemList[i].addEventListener("mouseover", changeImageOver); | teamElemList[i].addEventListener("mouseover", changeImageOver); | ||
teamElemList[i].addEventListener("mouseout", revertImageOut); | teamElemList[i].addEventListener("mouseout", revertImageOut); | ||
Revision as of 11:01, 7 October 2017
var links = {
"rongnan" : ["
", "
", "
"],
"gufei" : ["
", "
", "
"],
"tiangengshuo" : ["
", "
", "
"],
"chuhuanhuan" : ["
", "
", "
"],
"xingjiawei" : ["
", "
", "
"],
"yujundan" : ["
", "
", "
"],
"mijunhui" : ["
", "
", "
"],
"xinglinqing" : ["
", "
", "
"],
"wangmengmeng" : ["
", "
", "
"],
"zhaorongwei" : ["
", "
", "
"],
"lishangyang" : ["
", "
", "
"],
"lvsuyue" : ["
", "
", "
"],
"zengxiaomin" : ["
", "
", "
"],
"dongxiyu" : ["
", "
", "
"],
"zhangxizong" : ["
", "
", "
"],
"wanyuanqiang" : ["
", "
", "
"],
"liuziyu" : ["
", "
", "
"],
"guoyucong" : ["
", "
", "
"],
"houyutong" : ["
", "
", "
"],
"wangzhaodong" : ["
", "
", "
"]
}
window.onload = function() {
var teamElemList = document.getElementsByClassName("team-member");
var imgElem = document.createElement("img");
imgElem.setAttribute("class","member-img");
imgElem.style.display = "none";
for(var i = 0;i < teamElemList.length;i ++) {
imgElem.setAttribute("src", links[teamElemList[i].getAttribute("name")][2]);
teamElemList[i].insertBefore(teamElemList[i].firstElementChild, imgElem);
// teamElemList[i].insertAdjacentHTML("afterbegin", imgElem);
imgElem.setAttribute("src", links[teamElemList[i].getAttribute("name")][1]);
teamElemList[i].insertBefore(teamElemList[i].firstElementChild, imgElem);
teamElemList[i].addEventListener("mouseover", changeImageOver);
teamElemList[i].addEventListener("mouseout", revertImageOut);
teamElemList[i].addEventListener("mousedown", changeImageDown);
teamElemList[i].addEventListener("mouseup", revertImageUp);
}
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;
var temp = teamElem.querySelector(".member-img");
temp.src = links[teamElem.getAttribute("name")][1];
temp.style.opacity = 0.4;
temp = teamElem.querySelector(".member-name");
//temp.style.display = "block";
temp.style.opacity = 1;
temp = teamElem.querySelector(".member-intro");
temp.style.display = "block";
temp.style.opacity = 1;
temp.style.transition = "opacity 0.8s";
teamElem.style.cursor = "pointer";
}
function revertImageOut() {
var teamElem = this;
var temp = teamElem.querySelector(".member-img");
temp.src = links[teamElem.getAttribute("name")][0];
temp.style.opacity = 1;
temp = teamElem.querySelector(".member-name");
temp.style.opacity = 1;
// temp.style.display = "none";
temp = teamElem.querySelector(".member-intro");
// temp.style.display = "none";
temp.style.opacity = 0;
temp.style.transition = "opacity 0s";
teamElem.style.cursor = "auto";
}
function changeImageDown() {
var teamElem = this;
var temp = teamElem.querySelector(".member-img");
temp.src = links[teamElem.getAttribute("name")][2];
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";
teamElem.style.cursor = "auto";
}
function revertImageUp() {
var teamElem = this;
var temp = teamElem.querySelector(".member-img");
temp.src = links[teamElem.getAttribute("name")][1];
temp.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";
teamElem.style.cursor = "pointer";
}
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";
}
}
}
