Difference between revisions of "Template:BNU-China/Javascript/team"
(Created page with "var links = { "rongnan" : ["https://static.igem.org/mediawiki/2017/e/e1/T--BNU-China--rn1.jpg", "https://static.igem.org/mediawiki/2017/9/9a/T--BNU-China--rn2.jpg", "https://2017.igem.org...") |
|||
| Line 46: | Line 46: | ||
temp.style.display = "block"; | temp.style.display = "block"; | ||
temp.style.opacity = 1; | temp.style.opacity = 1; | ||
| − | temp.style.transition = "opacity | + | temp.style.transition = "opacity 0.8s"; |
teamElem.style.cursor = "pointer"; | teamElem.style.cursor = "pointer"; | ||
} | } | ||
Revision as of 09:48, 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");
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);
}
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";
}
}
}
