|
|
| Line 1: |
Line 1: |
| − | <html>
| |
| − | <style type="text/css">
| |
| − | #top_title{
| |
| − | display:none;
| |
| − | }
| |
| − | * {
| |
| − | box-sizing: border-box;
| |
| − | }
| |
| | | | |
| − | a {
| |
| − | text-decoration: none;
| |
| − | }
| |
| − |
| |
| − | ul,
| |
| − | ol {
| |
| − | list-style: none;
| |
| − | }
| |
| − |
| |
| − | body {
| |
| − | font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
| |
| − | font-size: 14px;
| |
| − | line-height: 1.42857143;
| |
| − | color: #333;
| |
| − | min-width: 768px;
| |
| − | }
| |
| − |
| |
| − | .navbar-default {
| |
| − | background-color: #EEE;
| |
| − | border-color: #e7e7e7;
| |
| − | top: 16px;
| |
| − | border-width: 0 0 1px;
| |
| − | position: fixed;
| |
| − | right: 0;
| |
| − | left: 0;
| |
| − | z-index: 1030;
| |
| − | min-height: 50px;
| |
| − | margin-bottom: 20px;
| |
| − | border: 1px solid transparent;
| |
| − | min-width: 768px;
| |
| − | }
| |
| − |
| |
| − | .container {
| |
| − | padding-right: 15px;
| |
| − | padding-left: 15px;
| |
| − | margin-right: auto;
| |
| − | margin-left: auto;
| |
| − | }
| |
| − |
| |
| − | @media screen and (min-width: 768px) {
| |
| − | .container {
| |
| − | width: 750px;
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | @media screen and (min-width: 992px) {
| |
| − | .container {
| |
| − | width: 970px;
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | @media screen and (min-width: 1200px) {
| |
| − | .container {
| |
| − | width: 1170px;
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | .navbar-header {
| |
| − | float: left;
| |
| − | }
| |
| − |
| |
| − | .navbar-brand {
| |
| − | color: #777;
| |
| − | float: left;
| |
| − | height: 50px;
| |
| − | padding: 15px 15px;
| |
| − | font-size: 18px;
| |
| − | line-height: 20px;
| |
| − | }
| |
| − |
| |
| − | .navbar>ul>li {
| |
| − | float: left;
| |
| − | }
| |
| − |
| |
| − | .nav>li {
| |
| − | position: relative;
| |
| − | display: block;
| |
| − | margin-right: 10px;
| |
| − | }
| |
| − |
| |
| − | .nav>li>a {
| |
| − | color: #777;
| |
| − | position: relative;
| |
| − | display: block;
| |
| − | padding: 8px 15px;
| |
| − | cursor: pointer;
| |
| − | }
| |
| − |
| |
| − | .nav>li>a:hover {
| |
| − | color: #333;
| |
| − | }
| |
| − |
| |
| − | .caret {
| |
| − | display: inline-block;
| |
| − | width: 0;
| |
| − | height: 0;
| |
| − | margin-left: 2px;
| |
| − | vertical-align: middle;
| |
| − | border-top: 4px solid #777;
| |
| − | border-right: 4px solid transparent;
| |
| − | border-left: 4px solid transparent;
| |
| − | position: absolute;
| |
| − | top: 18px;
| |
| − | right: 1px;
| |
| − | }
| |
| − |
| |
| − | .nav>li>a:hover+span {
| |
| − | border-top: 4px solid #333;
| |
| − | }
| |
| − |
| |
| − | .nav>li .dropdown-menu {
| |
| − | margin-top: 0;
| |
| − | border-top-left-radius: 0;
| |
| − | border-top-right-radius: 0;
| |
| − | position: absolute;
| |
| − | top: 35px;
| |
| − | left: 0;
| |
| − | z-index: 1000;
| |
| − | float: left;
| |
| − | min-width: 160px;
| |
| − | padding: 5px 0;
| |
| − | margin: 2px 0 0;
| |
| − | font-size: 14px;
| |
| − | text-align: left;
| |
| − | list-style: none;
| |
| − | background-color: #fff;
| |
| − | -webkit-background-clip: padding-box;
| |
| − | background-clip: padding-box;
| |
| − | border: 1px solid #ccc;
| |
| − | border: 1px solid rgba(0, 0, 0, .15);
| |
| − | border-radius: 4px;
| |
| − | -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
| |
| − | box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
| |
| − | display: none;
| |
| − | }
| |
| − |
| |
| − | .dropdown-menu>li {
| |
| − | display: list-item;
| |
| − | }
| |
| − |
| |
| − | .dropdown-menu>li>a {
| |
| − | display: block;
| |
| − | padding: 3px 20px;
| |
| − | clear: both;
| |
| − | font-weight: normal;
| |
| − | line-height: 1.42857143;
| |
| − | color: #333;
| |
| − | white-space: nowrap;
| |
| − | }
| |
| − | .dropdown-menu>li>a:hover {
| |
| − | background-color: #eee;
| |
| − | }
| |
| − | html {
| |
| − | font-family: sans-serif;
| |
| − | -webkit-text-size-adjust: 100%;
| |
| − | -ms-text-size-adjust: 100%;
| |
| − | }
| |
| − | #mainDiv{
| |
| − |
| |
| − | margin: 0;
| |
| − | min-height: 1000px;
| |
| − | padding-top: 70px;
| |
| − | min-width: 1140px;
| |
| − | background: url('https://static.igem.org/mediawiki/2018/4/4b/T--SCAU-China--ziyeMain.jpg') no-repeat center center;
| |
| − | }
| |
| − | .heart {
| |
| − | width: 1140px;
| |
| − | margin: 0 auto;/* 通用的版心 */
| |
| − | }
| |
| − | #mask {
| |
| − | width: 100%;
| |
| − | height: 1000px;
| |
| − | background: rgba(0, 0, 0, 0.3);
| |
| − | margin-top: -15px;
| |
| − | padding-top: 15px;
| |
| − | }
| |
| − | .DBoard {/* 展板样式 */
| |
| − | margin: 0px auto 40px auto;
| |
| − | width: 1000px;
| |
| − | height: 500px;
| |
| − | border-radius: 3px;
| |
| − | background-color: #fff;
| |
| − | overflow: hidden;
| |
| − | position: relative;
| |
| − | }
| |
| − | .DBoard0 {/*文字样式*/
| |
| − | margin: 0px auto 40px auto;
| |
| − | width: 1000px;
| |
| − | height: 500px;
| |
| − | border-radius: 3px;
| |
| − | color: white;
| |
| − | overflow: hidden;
| |
| − | position: relative;
| |
| − | }
| |
| − | #mask p {
| |
| − | color: #fff;
| |
| − | text-align: center;
| |
| − | }
| |
| − | #lists-DB {
| |
| − | cursor: pointer;
| |
| − | }
| |
| − | #lists-DB:hover #arr-l,#lists-DB:hover #arr-r{
| |
| − | display: block;
| |
| − | }
| |
| − | #lists {
| |
| − | position: relative;
| |
| − | width: 4000px;
| |
| − | }
| |
| − | #lists img {
| |
| − | float: left;
| |
| − | }
| |
| − | #arr-l,#arr-r {
| |
| − | display: block;
| |
| − | position: absolute;
| |
| − | width: 40px;
| |
| − | height: 60px;
| |
| − | background: rgba(0, 0, 0, .4);
| |
| − | top: 50%;
| |
| − | margin-top: -30px;
| |
| − | color: #fff;
| |
| − | font: 600 30px/60px "宋体";
| |
| − | line-height: 60px;
| |
| − | text-align: center;
| |
| − | display: none;
| |
| − | }
| |
| − | #arr-l:hover,#arr-r:hover {
| |
| − | background: rgba(0, 0, 0, .7);
| |
| − | }
| |
| − | #arr-l {
| |
| − | left: 0;
| |
| − | }
| |
| − | #arr-r {
| |
| − | right: 0;
| |
| − | }
| |
| − | #buttons {
| |
| − | position: absolute;
| |
| − | bottom: 15px;
| |
| − | left: 50%;
| |
| − | }
| |
| − | #buttons span {
| |
| − | width: 12px;
| |
| − | height: 12px;
| |
| − | background: #ccc;
| |
| − | float: left;
| |
| − | border-radius: 50%;
| |
| − | margin: 0 5px 0 5px;
| |
| − | }
| |
| − | .on {
| |
| − | background-color: #333 !important;
| |
| − | }
| |
| − | #toTop {
| |
| − | width: 50px;
| |
| − | height: 50px;
| |
| − | background: url("https://static.igem.org/mediawiki/2018/b/b6/T--SCAU-China--toTop.png") no-repeat center center rgba(0, 0, 0, .3);
| |
| − | position: fixed;
| |
| − | right: 50px;
| |
| − | bottom: 5px;
| |
| − | cursor: pointer;
| |
| − | display: none;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | }
| |
| − | #img4{
| |
| − | width: 10%;
| |
| − | }
| |
| − | #content {
| |
| − | width: 101%;
| |
| − | padding: 15px;
| |
| − | border: none;
| |
| − | color: black;
| |
| − | margin-left: 20px;
| |
| − | margin-right: auto;
| |
| − | background-color: #ffffff;
| |
| − | position: relative;
| |
| − | }
| |
| − | #content {
| |
| − | position: relative;
| |
| − | width: 101%;
| |
| − | margin: 0 auto;
| |
| − | padding: 5px 5px 5px 5px;
| |
| − | background: white;
| |
| − | color: black;
| |
| − | border-left: 1px solid #444444;
| |
| − | border-right: 1px solid #444444;
| |
| − | line-height: 1.5em;
| |
| − | z-index: 2;
| |
| − | }
| |
| − | #title{
| |
| − | height: 100px;
| |
| − | background: rgba(0, 0, 0, 0.3);
| |
| − | text-align: left;
| |
| − | font-size: 60px;
| |
| − | color: white;
| |
| − | font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
| |
| − | line-height: 100px;
| |
| − |
| |
| − | }
| |
| − | #article1{
| |
| − | background: rgba(0, 0, 0, 0);
| |
| − |
| |
| − | }
| |
| − | #article1 p{
| |
| − |
| |
| − | text-align: left;
| |
| − | position: relative;
| |
| − | color: white;
| |
| − | margin-top: 20px;
| |
| − |
| |
| − | font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
| |
| − | font-size:20px;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | </style>
| |
| − | <div class="navbar-default">
| |
| − | <div class="container">
| |
| − | <div class="navbar-header">
| |
| − | <a href="https://2018.igem.org/Team:SCAU-China" class="navbar-brand">SCAU-2018</a>
| |
| − | </div>
| |
| − | <div class="navbar">
| |
| − | <ul style="float: left;" class="nav">
| |
| − | <li class="dropdown">
| |
| − | <a href="javascript:void(0)">TEAM</a>
| |
| − | <span class="caret"></span>
| |
| − | <ul class='dropdown-menu'>
| |
| − | <li>
| |
| − | <a href="#">Time shaft</a>
| |
| − | </li>
| |
| − | <li>
| |
| − | <a href="#">Members</a>
| |
| − | </li>
| |
| − | <li>
| |
| − | <a href="#">Advisors</a>
| |
| − | </li>
| |
| − | <li>
| |
| − | <a href="#">Teachers</a>
| |
| − | </li>
| |
| − | <li>
| |
| − | <a href="#">Attributions</a>
| |
| − | </li>
| |
| − | <li>
| |
| − | <a href="#">Collaborations</a>
| |
| − | </li>
| |
| − | </ul>
| |
| − | </li>
| |
| − | <li class="dropdown">
| |
| − | <a href="javascript:void(0)">PROJECT</a>
| |
| − | <span class="caret"></span>
| |
| − | <ul class='dropdown-menu'>
| |
| − | <li><a href="https://2018.igem.org/Team:SCAU-China/Description">Description</a></li>
| |
| − | <li><a href="#">Design</a></li>
| |
| − | </ul>
| |
| − | </li>
| |
| − | <li class="dropdown">
| |
| − | <a href="javascript:void(0)">PART</a>
| |
| − | <span class="caret"></span>
| |
| − | <ul class='dropdown-menu'>
| |
| − | <li><a href="#">Basic parts</a></li>
| |
| − | <li><a href="https://2018.igem.org/Team:SCAU-China/interlab">interlab</a></li>
| |
| − | </ul>
| |
| − | </li>
| |
| − | <li class="dropdown">
| |
| − | <a href="javascript:void(0)">RESULT</a>
| |
| − | <span class="caret"></span>
| |
| − | <ul class='dropdown-menu'>
| |
| − | <li><a href="#">Experiments</a></li>
| |
| − | <li><a href="#">Proof</a></li>
| |
| − | <li><a href="#">Demonstrate</a></li>
| |
| − | <li><a href="#">Model</a></li>
| |
| − | </ul>
| |
| − | </li>
| |
| − | <li class="dropdown">
| |
| − | <a href="javascript:void(0)">NOTE</a>
| |
| − | <span class="caret"></span>
| |
| − | <ul class='dropdown-menu'>
| |
| − | <li><a href="#">NoteBook</a></li>
| |
| − | <li><a href="#">Gallery</a></li>
| |
| − | <li><a href="#">Protocol</a></li>
| |
| − | </ul>
| |
| − | </li>
| |
| − | </ul>
| |
| − | <ul style="float: right;" class="nav">
| |
| − | <li class="dropdown">
| |
| − | <a href="javascript:void(0)">SAFETY</a>
| |
| − | <span class="caret"></span>
| |
| − | <ul class='dropdown-menu'>
| |
| − | <li><a href="https://2018.igem.org/Team:SCAU-China/Safety">Safety</a></li>
| |
| − | </ul>
| |
| − | </li>
| |
| − | <li class="dropdown">
| |
| − | <a href="javascript:void(0)">HUMAN PRACTICES</a>
| |
| − | <span class="caret"></span>
| |
| − | <ul class='dropdown-menu'>
| |
| − | <li><a href="#">Integrated</a></li>
| |
| − | <li><a href="#">Engagement</a></li>
| |
| − | <li><a href="#">Entrepreneurship</a></li>
| |
| − | <li><a href="#"></a></li>
| |
| − | <li><a href="#"></a></li>
| |
| − | </ul>
| |
| − | </li>
| |
| − | </ul>
| |
| − | </div>
| |
| − | </div>
| |
| − | </div>
| |
| − |
| |
| − |
| |
| − |
| |
| − | <div id="mainDiv">
| |
| − | <div class="heart"><!-- 版心 -->
| |
| − | <div id="mask"><!-- 半透明底板 -->
| |
| − |
| |
| − | <div class="DBoard" id="title">
| |
| − | interlab
| |
| − | </div>
| |
| − | <div class="DBoard" id="article1"><!-- 展板 -->
| |
| − | <p>comming soon...</p>
| |
| − | <p></p>
| |
| − | <p></p>
| |
| − |
| |
| − | </div>
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − | <p>School's name:SCAU</p>
| |
| − | <p>Member's name:SCAU</p>
| |
| − | <p>Designed by:SCAU</p>
| |
| − | </div>
| |
| − | </div>
| |
| − | </div>
| |
| − | <!-- 回到顶部按钮 -->
| |
| − | <em id="toTop"></em>
| |
| − |
| |
| − | <script>
| |
| − | var dropdownBoxs = document.getElementsByClassName('dropdown');
| |
| − | var dropdownMenus = document.getElementsByClassName('dropdown-menu');
| |
| − | for (let i = 0 ; i < dropdownBoxs.length ; i ++) {
| |
| − | // console.log(dropdownBoxs[i]);
| |
| − | // console.log(dropdownMenus[i]);
| |
| − | dropdownBoxs[i].index = i;
| |
| − | dropdownBoxs[i].onclick = function () {
| |
| − | var styles = document.defaultView.getComputedStyle(dropdownMenus[i]) || dropdownMenus[i].currentStyle;
| |
| − | // console.log(styles.display);
| |
| − | if (styles.display == 'none') {
| |
| − | for (let j = 0 ; j < dropdownBoxs.length ; j ++) {
| |
| − | dropdownMenus[j].style.display = 'none';
| |
| − | dropdownMenus[i].style.display = 'block';
| |
| − | }
| |
| − | } else {
| |
| − | for (let j = 0 ; j < dropdownBoxs.length ; j ++) {
| |
| − | dropdownMenus[j].style.display = 'none';
| |
| − | }
| |
| − | }
| |
| − | }
| |
| − | }
| |
| − | </script>
| |
| − |
| |
| − |
| |
| − | <script type="text/javascript">
| |
| − |
| |
| − | var a= function() {
| |
| − | var box01 = document.getElementById("lists-DB");
| |
| − | var lis = document.getElementById("lists");//获得轮播图图片盒子
| |
| − | var btns = document.getElementById("buttons");//获得按钮盒子
| |
| − | var imgs = lis.getElementsByTagName("img");//获得图片伪数组
| |
| − | btns.style.width = 24 * (imgs.length - 2) + "px";
| |
| − | btns.style.marginLeft = -(12 * (imgs.length - 2)) + "px";//动态赋值
| |
| − | for(var i = 0;i < imgs.length - 2; i++){
| |
| − | //动态生成小圆点
| |
| − | var span = document.createElement("span");
| |
| − | btns.appendChild(span);
| |
| − | }
| |
| − |
| |
| − |
| |
| − | //轮播图正式部分
| |
| − | var prev = document.getElementById("arr-l");
| |
| − | var next = document.getElementById("arr-r");
| |
| − | var animated = false;//防止计时器多次被触发变量
| |
| − |
| |
| − | function animate(offset) {
| |
| − | var time = 300;//滚动一张图片总用时
| |
| − | var inteval = 10;//滚动一次的间隔时间
| |
| − | var speed = offset / (time / inteval);//每次滚动滑动的像素
| |
| − | var left = parseInt(lis.style.left) + offset;//先计算出滚动后的left值
| |
| − | function go() {
| |
| − | animated = true;//为true代表正在运行
| |
| − | //滑动函数
| |
| − | if(((speed > 0) + (parseInt(lis.style.left) < left)===2) || ((speed < 0) + (parseInt(lis.style.left)) > left===2)){
| |
| − | lis.style.left = parseInt(lis.style.left) + speed + "px";
| |
| − | setTimeout(go,inteval);//设置计时器
| |
| − | }
| |
| − | else {
| |
| − | lis.style.left = left + "px";
| |
| − | if(parseInt(lis.style.left) > -1000) lis.style.left = -(1000 * (imgs.length - 2)) + "px";
| |
| − | if(parseInt(lis.style.left) < -(1000 * (imgs.length - 2))) lis.style.left = -1000 + "px";
| |
| − | animated = false;//结束运行
| |
| − | }
| |
| − | }
| |
| − | go();//调用函数
| |
| − |
| |
| − | }
| |
| − | prev.onclick = function() {
| |
| − | if(animated) return;//正在轮播停止
| |
| − | if(index == 0) index = spans.length - 1;
| |
| − | else index --;
| |
| − | animate(1000);
| |
| − | showButton();
| |
| − | }
| |
| − | next.onclick = function() {
| |
| − | if(animated) return;
| |
| − | if(index == spans.length - 1) index = 0;
| |
| − | else index ++;
| |
| − | animate(-1000);
| |
| − | showButton();
| |
| − | }
| |
| − | var index = 0;//记录现在className为on的按钮
| |
| − |
| |
| − | var spans = btns.getElementsByTagName("span");//得到btns下所有的span标签
| |
| − | spans[0].className = "on";
| |
| − | for(var i = 0;i < spans.length;i ++ ) {
| |
| − | spans[i].index = i;//自定义属性
| |
| − | spans[i].onclick = function() {
| |
| − | if(animated) return;
| |
| − | if(this.className == "on") return;
| |
| − | animate((index - this.index) * 1000);
| |
| − | index = this.index;
| |
| − | showButton();
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | function showButton() { //显示按钮运动的函数
| |
| − | for(var j = 0;j < spans.length;j ++) {//排它思想
| |
| − | //if(spans[j].className == "on") oldIndex = j;
| |
| − | spans[j].className = "";
| |
| − | spans[index].className = "on";
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | var timer;//计时器变量 , 这里为什么不能为null
| |
| − | var interval = 3000;//点击间隔时间
| |
| − |
| |
| − | function play() {//自动点击next函数
| |
| − | timer = setTimeout(function(){
| |
| − | next.onclick();//自动点击next
| |
| − | play();//递归调用
| |
| − | },interval);
| |
| − | }
| |
| − |
| |
| − | function stop() {
| |
| − | //停止函数
| |
| − | clearTimeout(timer);
| |
| − | }
| |
| − |
| |
| − |
| |
| − | box01.onmouseover = stop; //鼠标悬浮在轮播图上时停止
| |
| − | box01.onmouseout = play;//鼠标离开轮播图继续
| |
| − | play();//先自己调用一次
| |
| − | }
| |
| − | a();
| |
| − | </script>
| |
| − | <script type="text/javascript">
| |
| − | //封装函数js文件，方便调用
| |
| − | function $(id) {return document.getElementById(id);}//封装获取id对象函数
| |
| − | function show(obj) {obj.style.display = "block";}//封装显示函数
| |
| − | function hidden(obj) {obj.style.display = "none";}//封装隐藏函数
| |
| − | function scroll(){
| |
| − | if(window.pageYOffset != null) {
| |
| − | //ie9+ 和 其他浏览器
| |
| − | return {
| |
| − | top: window.pageYOffset,
| |
| − | left: window.pageXOffset
| |
| − | }
| |
| − | }
| |
| − | else if(document.compatMode == "CSS1Compat") {
| |
| − | //非怪异浏览器：没有头部的
| |
| − | return {
| |
| − | top: document.documentElement.scrollTop,
| |
| − | left: document.documentElement.scrollLeft
| |
| − | }
| |
| − | }
| |
| − | return {//剩下的全部都是怪异浏览器
| |
| − | top: document.body.scrollTop,
| |
| − | left: document.body.scrollLeft
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | var leader = 0,target = 0,timer = null;//计时器变量
| |
| − | window.onscroll = function() {
| |
| − | //滚动时执行的函数
| |
| − | scroll().top > 0 ? show($("toTop")) : hidden($("toTop"));//隐藏和显示totop
| |
| − | leader = scroll().top; //实时记录滚动距离
| |
| − | }
| |
| − |
| |
| − | $("toTop").onclick = function() {
| |
| − | //toTop被点击时执行的函数
| |
| − | target = 0;
| |
| − | timer = setInterval(function() {
| |
| − | leader = leader + (target - leader) / 10;
| |
| − | window.scrollTo(0,leader);
| |
| − | if(leader == target) clearInterval(timer);//当到达顶端清除计时器
| |
| − | //必须写在里面,因为在计时器执行时判断
| |
| − | },20);
| |
| − | }
| |
| − |
| |
| − | </script>
| |
| − | </html>
| |
