Team:BIT/Team 3
From 2014.igem.org
Line 1: | Line 1: | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
<SCRIPT src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type=text/javascript></SCRIPT> | <SCRIPT src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type=text/javascript></SCRIPT> | ||
<script src="js/dropdown.js" type="text/javascript"></script> | <script src="js/dropdown.js" type="text/javascript"></script> | ||
Line 898: | Line 820: | ||
'showControls': true | 'showControls': true | ||
});</script> | });</script> | ||
- | |||
- |
Revision as of 09:19, 28 July 2014
<SCRIPT src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type=text/javascript></SCRIPT> <script src="js/dropdown.js" type="text/javascript"></script> <script src="js/jquery.js" type="text/javascript"></script> <script src="js/index.js" type="text/javascript"></script>
<script>
function changeImg(){
document.getElementsByClassName("gif1").src="img/BIT_20140725104903.gif";
}
$(document).ready(function(){
$(".nav li").mouseover(function(){
$(this).css("background","rgba(255,255,255,0.8)")
});
$(".nav li").mouseout(function(){
$(this).css("background","none")
});
});
$(document).ready(function(){ $('ul.one').hide();
//Open Menu $('.nav li').hover( function(){ var openMenu= $(this).children('ul.one'); $(openMenu).show(); }, function(){ var openMenu= $(this).children('ul.one'); $(openMenu).hide(); });
}); </script>
<style type="text/css">
#logo{ width:1024px; margin:auto; height:45px;}
- logo img{ position:absolute;left:485px;}
- address{width:1024px; height:50px; }
- others{
margin:auto 0; width:1024px; height:130px; margin-top:10px; }
- address p{ text-align:center; line-height:5px;}
body{ font-family:"helvetica"; margin:0;}
- main_container{ background:#000000; width:100%;height:100%; }
- container{width:1024px;margin:auto; position:relative;background:rgba(255,255,255,0.5);
}
- header{width:1024px;
height:255px;
text-align:center; background:url(http:/2014.igem.org/wiki/images/9/92/BIT_radiation1.jpg); margin:auto; position:relative;
}
- content{height:420px;
width:1024px;
margin:auto; background-color:#FFF;
position:relative; }
- footer ul{ margin:25px 20px 0 0;}
- footer li.style{ width:40px;}
- footer li{
list-style:none; float:right; box-shadow:none; border-radius:0; margin:0; padding:0; width:90px; }
- footer{
width:1024px; position:relative; margin:auto; margin-top:0; background-color:#FFF; color:#000; height:140px; font-size:12px;
}
- table1{ width:500px; position:absolute; table-layout:fixed;
left:130px; height:100px}
td{width: 170px; padding:10px 10px 0 10px; word-wrap:break-word; }
- table1 img{ width:20px; height:20px;vertical-align:text-bottom; margin-right:10px; }
@font-face{ font-family:"Maiandra" ;src:url(../fonts/Arabica.swf);format("opentype");}
- menubar {
position: absolute;
height:20px;
white-space: nowrap; top: 0px; width: 500px; z-index: 5; font-family: sans-serif; font-size: 20sp;
}
.left-menu, .left-menu a {
left: 0px; text-align: left; color:transparent; text-transform: lowercase;
}
.left-menu:hover {
color: white; background-color: #555555
} .right-menu, .right-menu a {
right: 0px; text-align: right; color: white;
}
- menubar ul {
list-style: none;
margin:0px;
}
- menubar li {
display: inline; position: relative; cursor: pointer; padding-left: 0px; padding-right: 0px;
} .left-menu li a {
padding: 0px 10px 0px 0px;
text-decoration:none; color: inherit; } .left-menu li a:hover {
color: #aaaaff; text-decoration: none;
} .left-menu li a:visited{
color: #69F; text-decoration: none;
}
.right-menu li a {
padding: 1.5px 15px 1.5px 10px; background-color: #606060;
text-decoration:none; margin:0px; } .right-menu li a:link {
color: white; text-decoration: none;
} .right-menu li a:hover {
color: #aaaaff; text-decoration: none;
} .right-menu li a:visited{
color: #69F; text-decoration: none;
}
.nav a, .nav h3, .nav h5, .one li a{ text-transform: uppercase; } .nav a{ display:block; text-decoration: none; } .nav i { display: block; padding: 0 5px; float: none; } .nav li { list-style: none; } .nav p {
font-size: 13px;
line-height: 23px;
} .nav input, .nav textarea{ display:block; border:none; } .nav h3 { margin:0 0 13px 0; padding:3px 0 5px 0; border-bottom:1px solid rgba(51,51,51,.2);
font-size: 20px; } .nav h5 { font-size: 16px; } .nav h6{ line-height: 20px;
font-family: Cambria, Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif; font-size:13px; font-style:italic; } .nav img { padding: 5px;
box-shadow: 1px 1px 4px rgba(102,102,102,.4); -webkit-box-shadow: 1px 1px 4px rgba(102,102,102,.4); -moz-box-shadow: 1px 1px 4px rgba(102,102,102,.4);
transition: all .3s; -webkit-transition: all .3s; -moz-transition: all .3s; -o-transition: all .3s; -ms-transition: all .3s; } .nav img:hover { transform:scale(1.1); -webkit-transform:scale(1.1); -moz-transform:scale(1.1); -ms-transform:scale(1.1); -o-transform:scale(1.1); }
.label{ color:#FFF;} .nav { display: block; position:absolute; top:230px; left:100px;
height:50px; margin: 0 0 20px 0 ; padding:0 5px;
border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px;
}
.nav li {
position: relative;
z-index:2;
}
.nav > li {
display: block;
float:left;
color:#000;
border-right:1px solid #FFF; } .nav > li:hover { cursor: pointer; } .nav li > a{
font-size: 15px;
text-align:center;
margin:0 15px 0;
transition: background-color .7s; -webkit-transition: background-color .7s; -moz-transition: background-color .5s; -o-transition: background-color .5s; -ms-transition: background-color .5s; } .nav li:last-child{ border:none; }
.nav .one {
display: block;
position: absolute;
top: 100%;
left: 0%;
box-shadow: 1px 1px 1px rgba(102,102,102,.2); -webkit-box-shadow: 1px 1px 1px rgba(102,102,102,.2); -moz-box-shadow: 1px 1px 1px rgba(102,102,102,.2);
transition: background-color .3s ease-out; -webkit-transition: background-color .3s ease-out; -moz-transition: background-color .3s ease-out; -o-transition: background-color .3s ease-out; -ms-transition: background-color .3s ease-out; } .one > li { float: none; width: 160px;
} .one > li a{
margin:5px; height:20px;
font-size: 11px; letter-spacing: 1px; } .one li i.icon-chevron-right { float:right; margin:3px 5px 0 0;
font-size: 10px; }
.nav li:hover .one > li{ -webkit-animation: fadeIn .6s 1; animation: fadeIn .6s 1; }
- gallery{
left: 0px;
background:rgba(255,255,255,0.5); }
- gallery li{
width:200px;
}
- gallery li .image{
width:120px; height:30px; padding:5px; margin:auto; border-bottom: 1px solid rgba(51,51,51,.2);
}
- gallery li img{
float:left; margin:5px 5px 10px 0px; width:100px; height:150px; }
- gallery .image a{
text-align:center; line-height:40px;
}
- gallery .image a:hover{
color:#69F;
}
- gallery .image a:visited{
color:#CCCCCC;
}
- gallery a.more{
display:block; width:35px; height:16px; padding:0px 4px; margin:8px 0 5px 10px; cursor: pointer;
text-transform:capitalize; font-size:10px;
border-radius:4px; -webkit-border-radius:4px; -moz-border-radius:4px;
-webkit-box-shadow: 1px 1px 2px #fff, 1px 1px 2px rgba(158,111,86,0.3) inset; -moz-box-shadow: 1px 1px 2px #fff, 1px 1px 2px rgba(158,111,86,0.3) inset; box-shadow: 1px 1px 2px #fff, 1px 1px 2px rgba(158,111,86,0.3) inset; }
- {padding:0;list-style-type:none;}
a,img{border:0;}
/* case */ /*.case{background:url(../img/case.jpg) no-repeat;height:627px;overflow:hidden;width:891px;margin:0 auto;}*/ .case_box{position:relative;margin:15px auto 0px;width:860px;height:270px;overflow:hidden} .case_box p{z-index:2;position:absolute;text-indent:-9999px;width:28px;height:51px;top:40%;cursor:pointer} .case_box .prev{text-indent:-9999px;background:url() no-repeat;left:0px} .case_box .next{background:url() no-repeat;top:40%;right:0px} .case_box ul{position:absolute;height:250px;overflow:hidden;top:0px;left:0px} .case_box ul li{width:860px;float:left;height:250px; } .case_box ul li dl.case_info{line-height:17px;margin:95px 0px 0px 475px;width:295px;zoom:1;color:#616741;font-size:13px;overflow:hidden} .case_box ul li dl.case_info dd{text-indent:26px}
.case_box ul li.case_1{background:url(http:/2014.igem.org/wiki/images/9/92/BIT_radiation1.jpg) no-repeat center top} .case_box ul li.case_2{background:url(http:/2014.igem.org/wiki/images/3/3e/BIT_2.jpg) no-repeat center top} .case_box ul li.case_3{background:url(http:/2014.igem.org/wiki/images/9/92/BIT_radiation1.jpg) no-repeat center top} .case_box ul li.case_4{background:url(http:/2014.igem.org/wiki/images/3/3e/BIT_2.jpg) no-repeat center top} .case_box ul li.case_5{background:url(http:/2014.igem.org/wiki/images/9/92/BIT_radiation1.jpg) no-repeat center top} .case_box ul li.case_6{background:url(http:/2014.igem.org/wiki/images/3/3e/BIT_2.jpg) no-repeat center top}
.case_box ul li.case_2 dl{margin-top:150px} .case_box ul li.case_3 dl{margin-top:135px} .case_box ul li.case_4 dl{margin-top:110px} .case_box ul li.case_5 dl{margin-top:120px} .case_box ul li.case_6 dl{margin-top:115px}
.case_info_add dd{line-height:22px}
.case_box ol{position:absolute;bottom:0;left:50%;margin:10px 0 0 -65px;height:12px;z-index:99;top: 235px;} .case_box ol li{float:left;margin:0 4px;display:inline;width:12px;height:12px;line-height:999em;background:url(../img/BIT_pagination.png) no-repeat;overflow:hidden;cursor:pointer;} .case_box ol li.active{background-position:0 -12px;}
</style>
</head>
<body>
-
- </dd>
-
- </dd>
-
- </dd>
-
- </dd>
-
- </dd>
-
- </dd>
Beijing Institute of Technology | 5 South Zhongguancun Street, Haidian DistrictBeijing, China 100081
E-mail: yifei0114@bit.edu.cn
Beijing Institute of Technology © 2014 Privacy Policy
<script type="text/javascript"> var Effect = (function() {
var Slider = function(o) { this.setting = typeof o === 'object' ? o : {}; this.target = this.setting.target || 'slider'; this.showMarkers = this.setting.showMarkers || false; this.showControls = this.setting.showControls || false; this.timer = null; this.currentTime = null; this.ms = 35; this.autoMs = 3000; this.iTarget = 0; this.nextTarget = 0; this.speed = 0; this.init(); this.handleEvent(); }; Slider.prototype = { init: function() { this.obj = document.getElementById(this.target); this.oUl = this.obj.getElementsByTagName('ul')[0]; this.aUlLis = this.oUl.getElementsByTagName('li'); this.width = this.aUlLis[0].offsetWidth; this.number = this.aUlLis.length; this.oUl.style.width = this.width * this.number + 'px'; if(this.showMarkers) { var oDiv = document.createElement('div'); var aLis = []; for(var i = 0; i < this.number; i++) {aLis.push('
- '+ aLis.join() +'<\/ol>';
this.obj.appendChild(oDiv.firstChild);
this.aLis = this.obj.getElementsByTagName('ol')[0].getElementsByTagName('li');
this.aLis[0].className = 'active';
oDiv = null;
};
if(this.showControls) {
this.oPrev = document.createElement('p');
this.oNext = document.createElement('p');
this.oPrev.className = 'prev';
this.oPrev.innerHTML = '«';
this.oNext.className = 'next';
this.oNext.innerHTML = '»';
this.obj.appendChild(this.oPrev);
this.obj.appendChild(this.oNext);
};
},
handleEvent: function() {
var that = this;
this.currentTime = setInterval(function() {
that.autoPlay();
}, this.autoMs);
this.addEvent(this.obj, 'mouseover', function() {
clearInterval(that.currentTime);
});
this.addEvent(this.obj, 'mouseout', function() {
that.currentTime = setInterval(function() {
that.autoPlay();
}, that.autoMs);
});
if(this.showMarkers) {
for(var i = 0; i < this.number; i++) {
var el = this.aLis[i];
(function(index) {
that.addEvent(el, 'mouseover', function() {
that.goTime(index);
});
})(i);
};
};
if(this.showControls) {
this.addEvent(this.oPrev, 'click', function() {
that.fnPrev();
});
this.addEvent(this.oNext, 'click', function() {
that.autoPlay();
});
};
},
addEvent: function(el, type, fn) {
if(window.addEventListener) {
el.addEventListener(type, fn, false);
}
else if(window.attachEvent) {
el.attachEvent('on' + type, fn);
};
},
fnPrev: function() {
this.nextTarget--;
if(this.nextTarget < 0) {
this.nextTarget = this.number - 1;
};
this.goTime(this.nextTarget);
},
autoPlay: function() {
this.nextTarget++;
if(this.nextTarget >= this.number) {
this.nextTarget = 0;
};
this.goTime(this.nextTarget);
},
goTime: function(index) {
var that = this;
if(this.showMarkers) {
for(var i = 0; i < this.number; i++) {
i == index ? this.aLis[i].className = 'active' : this.aLis[i].className = ;
};
};
this.iTarget = -index * this.width;
if(this.timer) {
clearInterval(this.timer);
};
this.timer = setInterval(function() {
that.doMove(that.iTarget);
}, this.ms);
},
doMove: function(target) {
this.oUl.style.left = this.speed + 'px';
this.speed += (target - this.oUl.offsetLeft) / 3;
if(Math.abs(target - this.oUl.offsetLeft) === 0) {
this.oUl.style.left = target + 'px';
clearInterval(this.timer);
this.timer = null;
};
}
};
return {
slider: function(o) {
var tt = new Slider(o);
}
};
})();
Effect.slider({
'targetElement': 'slider',
'showMarkers': true,
'showControls': true
});</script>