Team:BIT/Team 3
From 2014.igem.org
(Difference between revisions)
Line 1: | Line 1: | ||
- | |||
<html> | <html> | ||
<head> | <head> | ||
Line 5: | Line 4: | ||
<title>radiation measurement</title> | <title>radiation measurement</title> | ||
- | < | + | <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> | ||
<script src="js/jquery.js" type="text/javascript"></script> | <script src="js/jquery.js" type="text/javascript"></script> | ||
<script src="js/index.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"> | <style type="text/css"> | ||
- | + | #logo{ width:1024px; margin:auto; height:45px;} | |
#logo img{ position:absolute;left:485px;} | #logo img{ position:absolute;left:485px;} | ||
#address{width:1024px; height:50px; } | #address{width:1024px; height:50px; } | ||
Line 380: | Line 409: | ||
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(../img/BIT_previous.png) no-repeat;left:0px} | ||
+ | .case_box .next{background:url(../img/BIT_next.png) 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> | </style> | ||
+ | |||
Line 592: | Line 656: | ||
</div> | </div> | ||
- | <script type="text/javascript" | + | <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('<li>'+ (i+1) +'<\/li>'); | ||
+ | }; | ||
+ | oDiv.innerHTML = '<ol>'+ 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> | ||
</body> | </body> | ||
</html> | </html> |
Revision as of 13:27, 27 July 2014
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