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...")
 
 
(14 intermediate revisions by 2 users not shown)
Line 1: Line 1:
−
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://static.igem.org/mediawiki/2017/d/d3/T--BNU-China--rn3.jpg"],
 
−
"gufei" : ["https://static.igem.org/mediawiki/2017/3/3e/T--BNU-China--gf1.jpg", "https://static.igem.org/mediawiki/2017/1/1b/T--BNU-China--gf2.jpg", "https://static.igem.org/mediawiki/2017/7/75/T--BNU-China--gf3.jpg"],
 
−
"tiangengshuo" : ["https://static.igem.org/mediawiki/2017/9/9c/T--BNU-China--tgs1.jpg", "https://static.igem.org/mediawiki/2017/6/66/T--BNU-China--tgs2.jpg", "https://static.igem.org/mediawiki/2017/7/79/T--BNU-China--tgs3.jpg"],
 
−
"chuhuanhuan" : ["https://static.igem.org/mediawiki/2017/1/12/T--BNU-China--chh1.jpg", "https://static.igem.org/mediawiki/2017/5/57/T--BNU-China--chh2.jpg", "https://static.igem.org/mediawiki/2017/3/34/T--BNU-China--chh3.jpg"],
 
−
"xingjiawei" : ["https://static.igem.org/mediawiki/2017/f/f1/T--BNU-China--xjw1.jpg", "https://static.igem.org/mediawiki/2017/8/83/T--BNU-China--xjw2.jpg", "https://static.igem.org/mediawiki/2017/d/d3/T--BNU-China--xjw3.jpg"],
 
−
"yujundan" : ["https://static.igem.org/mediawiki/2017/6/6a/T--BNU-China--yjd1.jpg", "https://static.igem.org/mediawiki/2017/5/5c/T--BNU-China--yjd2.jpg", "https://static.igem.org/mediawiki/2017/4/49/T--BNU-China--yjd3.jpg"],
 
−
"mijunhui" : ["https://static.igem.org/mediawiki/2017/b/b7/T--BNU-China--mjh1.jpg", "https://static.igem.org/mediawiki/2017/b/b9/T--BNU-China--mjh2.jpg", "https://static.igem.org/mediawiki/2017/7/7d/T--BNU-China--mjh3.jpg"],
 
−
"xinglinqing" : ["https://static.igem.org/mediawiki/2017/5/5a/T--BNU-China--xlq1.jpg", "https://static.igem.org/mediawiki/2017/3/32/T--BNU-China--xlq2.jpg", "https://static.igem.org/mediawiki/2017/9/98/T--BNU-China--xlq3.jpg"],
 
−
"wangmengmeng" : ["https://static.igem.org/mediawiki/2017/4/4f/T--BNU-China--wmm1.jpg", "https://static.igem.org/mediawiki/2017/6/63/T--BNU-China--wmm2.jpg", "https://static.igem.org/mediawiki/2017/7/76/T--BNU-China--wmm3.jpg"],
 
−
"zhaorongwei" : ["https://static.igem.org/mediawiki/2017/2/29/T--BNU-China--zrw1.jpg", "https://static.igem.org/mediawiki/2017/6/68/T--BNU-China--zrw2.jpg", "https://static.igem.org/mediawiki/2017/e/e5/T--BNU-China--zrw3.jpg"],
 
−
"lishangyang" : ["https://static.igem.org/mediawiki/2017/6/61/T--BNU-China--lsy1.jpg", "https://static.igem.org/mediawiki/2017/c/c3/T--BNU-China--lsy2.jpg", "https://static.igem.org/mediawiki/2017/5/5b/T--BNU-China--lsy3.jpg"],
 
−
"lvsuyue" : ["https://static.igem.org/mediawiki/2017/7/7b/T--BNU-China--lvsuyue1.jpg", "https://static.igem.org/mediawiki/2017/5/5f/T--BNU-China--lvsuyue2.jpg", "https://static.igem.org/mediawiki/2017/c/ca/T--BNU-China--lvsuyue3.jpg"],
 
−
"zengxiaomin" : ["https://static.igem.org/mediawiki/2017/2/2e/T--BNU-China--zxm1.jpg", "https://static.igem.org/mediawiki/2017/e/e0/T--BNU-China--zxm2.jpg", "https://static.igem.org/mediawiki/2017/d/dc/T--BNU-China--zxm3.jpg"],
 
−
"dongxiyu" : ["https://static.igem.org/mediawiki/2017/2/2e/T--BNU-China--dxy1.jpg", "https://static.igem.org/mediawiki/2017/2/22/T--BNU-China--dxy2.jpg", "https://static.igem.org/mediawiki/2017/9/98/T--BNU-China--dxy3.jpg"],
 
−
"zhangxizong" : ["https://static.igem.org/mediawiki/2017/6/66/T--BNU-China--zxz1.jpg", "https://static.igem.org/mediawiki/2017/1/11/T--BNU-China--zxz2.jpg", "https://static.igem.org/mediawiki/2017/5/55/T--BNU-China--zxz3.jpg"],
 
−
"wanyuanqiang" : ["https://static.igem.org/mediawiki/2017/7/7b/T--BNU-China--wyq1.jpg", "https://static.igem.org/mediawiki/2017/f/fa/T--BNU-China--wyq2.jpg", "https://static.igem.org/mediawiki/2017/6/62/T--BNU-China--wyq3.jpg"],
 
−
"liuziyu" : ["https://static.igem.org/mediawiki/2017/e/ee/T--BNU-China--lzy1.jpg", "https://static.igem.org/mediawiki/2017/0/06/T--BNU-China--lzy2.jpg", "https://static.igem.org/mediawiki/2017/8/88/T--BNU-China--lzy3.jpg"],
 
−
"guoyucong" : ["https://static.igem.org/mediawiki/2017/3/36/T--BNU-China--gyc1.jpg", "https://static.igem.org/mediawiki/2017/2/26/T--BNU-China--gyc2.jpg", "https://static.igem.org/mediawiki/2017/d/db/T--BNU-China--gyc3.jpg"],
 
−
"houyutong" : ["https://static.igem.org/mediawiki/2017/7/77/T--BNU-China--hyt1.jpg", "https://static.igem.org/mediawiki/2017/0/00/T--BNU-China--hyt2.jpg", "https://static.igem.org/mediawiki/2017/9/99/T--BNU-China--hyt3.jpg"],
 
−
"wangzhaodong" : ["https://static.igem.org/mediawiki/2017/d/df/T--BNU-China--wzd1.jpg", "https://static.igem.org/mediawiki/2017/2/23/T--BNU-China--wzd2.jpg", "https://static.igem.org/mediawiki/2017/c/cd/T--BNU-China--wzd3.jpg"]
 
−
}
 
 
window.onload = function() {
 
window.onload = function() {
 
var teamElemList = document.getElementsByClassName("team-member");
 
var teamElemList = document.getElementsByClassName("team-member");
Line 28: Line 6:
 
teamElemList[i].addEventListener("mousedown", changeImageDown);
 
teamElemList[i].addEventListener("mousedown", changeImageDown);
 
teamElemList[i].addEventListener("mouseup", revertImageUp);
 
teamElemList[i].addEventListener("mouseup", revertImageUp);
 +
teamElemList[i].style.backgroundColor = "#90551e";
 
}
 
}
 
var group = document.querySelector(".group-list");
 
var group = document.querySelector(".group-list");
Line 37: Line 16:
 
function changeImageOver() {
 
function changeImageOver() {
 
var teamElem = this;
 
var teamElem = this;
−
var temp = teamElem.querySelector(".member-img");
+
// teamElem.style.backgroundColor = "#90551e";
−
temp.src = links[teamElem.getAttribute("name")][1];
+
teamElem.style.cursor = "pointer";
−
temp.style.opacity = 0.4;
+
var temp = teamElem.getElementsByClassName("member-img");
−
temp = teamElem.querySelector(".member-name");
+
temp[0].style.zIndex = -1;
−
//temp.style.display = "block";
+
temp[1].style.zIndex = 2;
−
temp.style.opacity = 1;
+
temp[1].style.opacity = 0.4;
 
temp = teamElem.querySelector(".member-intro");
 
temp = teamElem.querySelector(".member-intro");
 
temp.style.display = "block";
 
temp.style.display = "block";
 
temp.style.opacity = 1;
 
temp.style.opacity = 1;
−
temp.style.transition = "opacity 2s";
+
temp.style.transition = "opacity 0.8s";
−
teamElem.style.cursor = "pointer";
+
 
}
 
}
 
function revertImageOut() {
 
function revertImageOut() {
 
var teamElem = this;
 
var teamElem = this;
−
var temp = teamElem.querySelector(".member-img");
+
// teamElem.style.backgroundColor = "transparent";
−
temp.src = links[teamElem.getAttribute("name")][0];
+
teamElem.style.cursor = "auto";
−
temp.style.opacity = 1;
+
var temp = teamElem.getElementsByClassName("member-img");
−
temp = teamElem.querySelector(".member-name");
+
temp[0].style.zIndex = 0;
−
temp.style.opacity = 1;
+
temp[1].style.zIndex = -2;
−
// temp.style.display = "none";
+
 
temp = teamElem.querySelector(".member-intro");
 
temp = teamElem.querySelector(".member-intro");
−
// temp.style.display = "none";
+
temp.style.display = "none";
−
temp.style.opacity = 0;
+
// temp.style.opacity = 0;
−
temp.style.transition = "opacity 0s";
+
// temp.style.transition = "opacity 0s";
−
teamElem.style.cursor = "auto";
+
 
}
 
}
 
function changeImageDown() {
 
function changeImageDown() {
 
var teamElem = this;
 
var teamElem = this;
−
var temp = teamElem.querySelector(".member-img");
+
// teamElem.style.backgroundColor = "#90551e";
−
temp.src = links[teamElem.getAttribute("name")][2];
+
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 = teamElem.querySelector(".member-name");
 
temp.style.display = "none";
 
temp.style.display = "none";
Line 73: Line 53:
 
temp = teamElem.querySelector(".member-cute");
 
temp = teamElem.querySelector(".member-cute");
 
temp.style.display = "block";
 
temp.style.display = "block";
−
teamElem.style.cursor = "auto";
+
temp.style.opacity = 1;
 +
temp.style.transition = "opacity 0.8s";
 
}
 
}
 
function revertImageUp() {
 
function revertImageUp() {
 
var teamElem = this;
 
var teamElem = this;
−
var temp = teamElem.querySelector(".member-img");
+
// teamElem.style.backgroundColor = "transparent";
−
temp.src = links[teamElem.getAttribute("name")][1];
+
teamElem.style.cursor = "pointer";
−
temp.style.opacity = 0.4;
+
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 = teamElem.querySelector(".member-name");
 
temp.style.display = "block";
 
temp.style.display = "block";
Line 86: Line 70:
 
temp = teamElem.querySelector(".member-cute");
 
temp = teamElem.querySelector(".member-cute");
 
temp.style.display = "none";
 
temp.style.display = "none";
−
teamElem.style.cursor = "pointer";
 
 
}
 
}
 
function displaySelectedGroup() {
 
function displaySelectedGroup() {

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"; } } }