Difference between revisions of "Team:DLUT China B"

m (电子邮箱地址防爬虫。)
(顶部使用轮播图，增加浏览器版本提示，为六个圈预留位置，解决onscroll覆盖问题。)
Line 2: Line 2:
 
<head>
 
<head>
 
     <meta charset="UTF-8">
 
     <meta charset="UTF-8">
 +
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
     <title>2018 iGEM_DLUT_B</title>
 
     <title>2018 iGEM_DLUT_B</title>
 
     <link rel="stylesheet" href="https://2018.igem.org/wiki/index.php?title=Template:DLUT_China_B/css/style.css&action=raw&ctype=text/css">
 
     <link rel="stylesheet" href="https://2018.igem.org/wiki/index.php?title=Template:DLUT_China_B/css/style.css&action=raw&ctype=text/css">
 
     <link rel="stylesheet" href="https://2018.igem.org/wiki/index.php?title=Template:DLUT_China_B/css/nav.css&action=raw&ctype=text/css">
 
     <link rel="stylesheet" href="https://2018.igem.org/wiki/index.php?title=Template:DLUT_China_B/css/nav.css&action=raw&ctype=text/css">
 
     <link rel="stylesheet" href="https://2018.igem.org/wiki/index.php?title=Template:DLUT_China_B/css/bubbles.css&action=raw&ctype=text/css">
 
     <link rel="stylesheet" href="https://2018.igem.org/wiki/index.php?title=Template:DLUT_China_B/css/bubbles.css&action=raw&ctype=text/css">
 +
    <link rel="stylesheet" href="https://2018.igem.org/wiki/index.php?title=Template:DLUT_China_B/css/slideshow.css&action=raw&ctype=text/css">
 
     <link rel="stylesheet" href="https://2018.igem.org/wiki/index.php?title=Template:DLUT_China_B/css/fontawesome.css&action=raw&ctype=text/css">
 
     <link rel="stylesheet" href="https://2018.igem.org/wiki/index.php?title=Template:DLUT_China_B/css/fontawesome.css&action=raw&ctype=text/css">
  
 +
    <script src="https://2018.igem.org/wiki/index.php?title=Template:DLUT_China_B/js/slideshow.js&action=raw&ctype=text/javascript"></script>
 
     <script src="https://2018.igem.org/wiki/index.php?title=Template:DLUT_China_B/js/bubbles.js&action=raw&ctype=text/javascript"></script>
 
     <script src="https://2018.igem.org/wiki/index.php?title=Template:DLUT_China_B/js/bubbles.js&action=raw&ctype=text/javascript"></script>
−
     <script src="https://2018.igem.org/wiki/index.php?title=Template:DLUT_China_B/js/typed.js&action=raw&ctype=text/javascript"></script>
+
 
 +
     <script>
 +
        function check() {
 +
            if ((navigator.userAgent.indexOf("compatible") > -1 && navigator.userAgent.indexOf("MSIE") > -1) || (navigator.userAgent.indexOf('Trident') > -1 && navigator.userAgent.indexOf("rv:11.0") > -1))
 +
                alert('We are sorry but Microsoft Internet Explorer may be too old to display this page correctly.\nIt is recommended to update your browser, otherwise your experience may suffer.');
 +
        }
 +
    </script>
 
</head>
 
</head>
−
<body>
+
<body onload="check()">
 
<div id="dlutb">
 
<div id="dlutb">
 
     <div id="header">
 
     <div id="header">
 +
        <div id="box">
 +
            <div id="box_img">
 +
                <ul></ul>
 +
            </div>
 +
            <div id="word">
 +
                <ul></ul>
 +
            </div>
 +
            <div id="controller">
 +
                <div id="backward"><i class="fas fa-angle-left"></i></div>
 +
                <div id="forward"><i class="fas fa-angle-right"></i></div>
 +
            </div>
 +
            <script>
 +
                let data = [
 +
                    {
 +
                        "src": "https://static.igem.org/mediawiki/2018/2/29/T--DLUT_China_B--logo.png",
 +
                        "title": "DLUT China B Logo",
 +
                        "description": "DLUT China B Logo",
 +
                    },
 +
                    {
 +
                        "src": "https://static.igem.org/mediawiki/2018/9/96/T--DLUT_China_B--laboratory.jpg",
 +
                        "title": "Laboratory",
 +
                        "description": "Laboratory.",
 +
                    },
 +
                    {
 +
                        "src": "https://static.igem.org/mediawiki/2018/b/b6/T--DLUT_China_B--Clean_Bench.jpg",
 +
                        "title": "Clean Bench",
 +
                        "description": "Clean Bench.",
 +
                    }
 +
                ];
 +
                $(document).ready(slideshow(data));
 +
            </script>
 +
        </div>
 +
 
         <div id="nav"></div>
 
         <div id="nav"></div>
 
         <br>
 
         <br>
−
        <div class="title" id="teamName">DLUT China B</div>
+
    </div>
−
         <div id="typed">
+
 
−
             <span id="slogan"></span>
+
    <h2 class="title">Circles</h2>
 +
    <div id="circle">
 +
        <div class="tr">
 +
            <div class="td">a</div>
 +
            <div class="td">b</div>
 +
            <div class="td">c</div>
 +
         </div>
 +
        <div class="tr">
 +
             <div class="td">d</div>
 +
            <div class="td">e</div>
 +
            <div class="td">f</div>
 
         </div>
 
         </div>
−
        <br>
 
−
        <a class="btn" id="start">Get Started</a>
 
 
     </div>
 
     </div>
  
 
     <div>
 
     <div>
−
         <h2 class="title" id="meetUs">Chat Bubbles</h2>
+
         <h2 class="title">Chat Bubbles</h2>
 
         <div id="chatBubbles"></div>
 
         <div id="chatBubbles"></div>
 
     </div>
 
     </div>
Line 57: Line 107:
 
     <script src="https://2018.igem.org/wiki/index.php?title=Template:DLUT_China_B/js/script.js&action=raw&ctype=text/javascript"></script>
 
     <script src="https://2018.igem.org/wiki/index.php?title=Template:DLUT_China_B/js/script.js&action=raw&ctype=text/javascript"></script>
 
     <script>
 
     <script>
−
        /*口号*/
 
−
        let options = {
 
−
            strings: ["We can put our slogan here", "Or other things to be said"],
 
−
            typeSpeed: 100,
 
−
            loop: true,
 
−
            startDelay: 100,
 
−
            backSpeed: 50
 
−
        };
 
−
        let typed = new Typed("#slogan", options);
 
−
 
−
        /*开始*/
 
−
        $('#start').click(function () {
 
−
            $('html,body').animate({scrollTop: $('#meetUs').offset().top - 60}, 500);
 
−
        });
 
−
 
 
         /*对话气泡*/
 
         /*对话气泡*/
 
         let conversation = {
 
         let conversation = {
Line 134: Line 169:
 
                 ]
 
                 ]
 
             },
 
             },
−
             "listen1":{
+
             "listen1": {
−
                 says:[
+
                 says: [
 
                     "Here is iGEM_DLUT_China_B.",
 
                     "Here is iGEM_DLUT_China_B.",
 
                     "I'll introduce our project for you.",
 
                     "I'll introduce our project for you.",
Line 143: Line 178:
 
                     "Older people over the age of 60 may be suffering from Alzheimer's disease."
 
                     "Older people over the age of 60 may be suffering from Alzheimer's disease."
 
                 ],
 
                 ],
−
                 reply:[
+
                 reply: [
 
                     {
 
                     {
−
                         question:"And then?",
+
                         question: "And then?",
−
                         answer:"listen2"
+
                         answer: "listen2"
 
                     }
 
                     }
 
                 ]
 
                 ]
 
             },
 
             },
−
             "listen2":{
+
             "listen2": {
−
                 says:["The second step is to have regular medical examination to intervene disease early to prevent its progression."],
+
                 says: ["The second step is to have regular medical examination to intervene disease early to prevent its progression."],
−
                 reply:[
+
                 reply: [
 
                     {
 
                     {
−
                         question:"Yes, it makes sense, but how can that be achieved?",
+
                         question: "Yes, it makes sense, but how can that be achieved?",
−
                         answer:"listen3"
+
                         answer: "listen3"
 
                     }
 
                     }
 
                 ]
 
                 ]
 
             },
 
             },
−
             "listen3":{
+
             "listen3": {
−
                 says:[
+
                 says: [
 
                     "You may not believe that",
 
                     "You may not believe that",
 
                     "we can know our physical condition through the urine.",
 
                     "we can know our physical condition through the urine.",
 
                     "Urine is regard as \"gold mine\" for the identification of disease markers."
 
                     "Urine is regard as \"gold mine\" for the identification of disease markers."
 
                 ],
 
                 ],
−
                 reply:[
+
                 reply: [
 
                     {
 
                     {
−
                         question:"Is that true?",
+
                         question: "Is that true?",
−
                         answer:"listen4"
+
                         answer: "listen4"
 
                     }
 
                     }
 
                 ]
 
                 ]
 
             },
 
             },
−
             "listen4":{
+
             "listen4": {
−
                 says:[
+
                 says: [
 
                     "Absolutely, it's like a mirror that reflects one's health.",
 
                     "Absolutely, it's like a mirror that reflects one's health.",
 
                     "In the early stages of the disease, we can use the protein markers in the urine to screen the disease."
 
                     "In the early stages of the disease, we can use the protein markers in the urine to screen the disease."
 
                 ],
 
                 ],
−
                 reply:[
+
                 reply: [
 
                     {
 
                     {
−
                         question:"But how do you test it?",
+
                         question: "But how do you test it?",
−
                         answer:"listen5"
+
                         answer: "listen5"
 
                     }
 
                     }
 
                 ]
 
                 ]
 
             },
 
             },
−
             "listen5":{
+
             "listen5": {
−
                 says:["To be honest, we use a very tiny nano-antibody, and liquid crystal sensor to show reaction results for us."],
+
                 says: ["To be honest, we use a very tiny nano-antibody, and liquid crystal sensor to show reaction results for us."],
−
                 reply:[
+
                 reply: [
 
                     {
 
                     {
−
                         question:"Liquid crystal? How?",
+
                         question: "Liquid crystal? How?",
−
                         answer:"listen6"
+
                         answer: "listen6"
 
                     }
 
                     }
 
                 ]
 
                 ]
 
             },
 
             },
−
             "listen6":{
+
             "listen6": {
−
                 says:[
+
                 says: [
 
                     "In our daily life, we usually see the LCD screen is black. However, it becomes colorful as it works.",
 
                     "In our daily life, we usually see the LCD screen is black. However, it becomes colorful as it works.",
 
                     "Our products are similar in principle.",
 
                     "Our products are similar in principle.",
Line 201: Line 236:
 
                     "so the liquid crystal brightness can directly reflect the antigen concentration."
 
                     "so the liquid crystal brightness can directly reflect the antigen concentration."
 
                 ],
 
                 ],
−
                 reply:[
+
                 reply: [
 
                     {
 
                     {
−
                         question:"That means we can see directly how we are physically in the state.",
+
                         question: "That means we can see directly how we are physically in the state.",
−
                         answer:"listen7"
+
                         answer: "listen7"
 
                     }
 
                     }
 
                 ]
 
                 ]
 
             },
 
             },
−
             "listen7":{
+
             "listen7": {
−
                 says:[
+
                 says: [
 
                     "Yes, but we need to do a more accurate quantitative analysis.",
 
                     "Yes, but we need to do a more accurate quantitative analysis.",
 
                     "We take photos, and then grayscale processing and analysis of the average gray value.",
 
                     "We take photos, and then grayscale processing and analysis of the average gray value.",
 
                     "This can correspond to the concentration-gray curve that we have reached, thus we can accurately obtain the content of the marker."
 
                     "This can correspond to the concentration-gray curve that we have reached, thus we can accurately obtain the content of the marker."
 
                 ],
 
                 ],
−
                 reply:[
+
                 reply: [
 
                     {
 
                     {
−
                         question:"You did something amazing!",
+
                         question: "You did something amazing!",
−
                         answer:"last"
+
                         answer: "last"
 
                     }
 
                     }
 
                 ]
 
                 ]
 
             },
 
             },
−
             "last":{
+
             "last": {
 
                 says: [
 
                 says: [
 
                     "Summary has ended, the following is for each plate specific content.",
 
                     "Summary has ended, the following is for each plate specific content.",
Line 257: Line 292:
 
                 ]
 
                 ]
 
             },
 
             },
−
             "projectIntroduction":{
+
             "projectIntroduction": {
−
                 says:[
+
                 says: [
 
                     "Wow, you chose the project as the destination.",
 
                     "Wow, you chose the project as the destination.",
 
                     "Are you ready to go?"
 
                     "Are you ready to go?"
 
                 ],
 
                 ],
−
                 reply:[
+
                 reply: [
 
                     {
 
                     {
−
                         question:"Yes.",
+
                         question: "Yes.",
−
                         answer:"goProjectIntroduction"
+
                         answer: "goProjectIntroduction"
 
                     },
 
                     },
 
                     {
 
                     {
−
                         question:"Wait a second.",
+
                         question: "Wait a second.",
−
                         answer:"dest"
+
                         answer: "dest"
 
                     }
 
                     }
 
                 ]
 
                 ]
 
             },
 
             },
−
             "parts":{
+
             "parts": {
−
                 says:[
+
                 says: [
 
                     "Didi, you are about to reach parts.",
 
                     "Didi, you are about to reach parts.",
 
                     "You will learn about the main components we use such as messages."
 
                     "You will learn about the main components we use such as messages."
 
                 ],
 
                 ],
−
                 reply:[
+
                 reply: [
 
                     {
 
                     {
−
                         question:"OK, let`s go.",
+
                         question: "OK, let`s go.",
−
                         answer:"goParts"
+
                         answer: "goParts"
 
                     },
 
                     },
 
                     {
 
                     {
−
                         question:"Wait a second.",
+
                         question: "Wait a second.",
−
                         answer:"dest"
+
                         answer: "dest"
 
                     }
 
                     }
 
                 ]
 
                 ]
 
             },
 
             },
−
             "model":{
+
             "model": {
−
                 says:[
+
                 says: [
 
                     "Do you make the model as your destination?",
 
                     "Do you make the model as your destination?",
 
                     "Project optimization and results will be exhibited here."
 
                     "Project optimization and results will be exhibited here."
 
                 ],
 
                 ],
−
                 reply:[
+
                 reply: [
 
                     {
 
                     {
−
                         question:"Go and visit.",
+
                         question: "Go and visit.",
−
                         answer:"goModel"
+
                         answer: "goModel"
 
                     },
 
                     },
 
                     {
 
                     {
−
                         question:"I want a different destination.",
+
                         question: "I want a different destination.",
−
                         answer:"dest"
+
                         answer: "dest"
 
                     }
 
                     }
 
                 ]
 
                 ]
 
             },
 
             },
−
             "awards":{
+
             "awards": {
−
                 says:[
+
                 says: [
 
                     "You will find the treasures of application designing at the awards office."
 
                     "You will find the treasures of application designing at the awards office."
 
                 ],
 
                 ],
−
                 reply:[
+
                 reply: [
 
                     {
 
                     {
−
                         question:"Departure. (￣) ￣) ↗",
+
                         question: "Departure. (￣) ￣) ↗",
−
                         answer:"goAwards"
+
                         answer: "goAwards"
 
                     },
 
                     },
 
                     {
 
                     {
−
                         question:"I`m not interested in treasure hunt.",
+
                         question: "I`m not interested in treasure hunt.",
−
                         answer:"dest"
+
                         answer: "dest"
 
                     }
 
                     }
 
                 ]
 
                 ]
 
             },
 
             },
−
             "humanPractice":{
+
             "humanPractice": {
−
                 says:[
+
                 says: [
 
                     "We are committed to education and publicity.",
 
                     "We are committed to education and publicity.",
 
                     "Choose \"Learn more\" and will arrive at the human practice.",
 
                     "Choose \"Learn more\" and will arrive at the human practice.",
 
                     "Choose \"Back\", you can re-select the destination."
 
                     "Choose \"Back\", you can re-select the destination."
 
                 ],
 
                 ],
−
                 reply:[
+
                 reply: [
 
                     {
 
                     {
−
                         question:"Learn more",
+
                         question: "Learn more",
−
                         answer:"goHumanPractice"
+
                         answer: "goHumanPractice"
 
                     },
 
                     },
 
                     {
 
                     {
−
                         question:"Back",
+
                         question: "Back",
−
                         answer:"dest"
+
                         answer: "dest"
 
                     }
 
                     }
 
                 ]
 
                 ]
 
             },
 
             },
−
             "teamworkAndCooperation":{
+
             "teamworkAndCooperation": {
−
                 says:[
+
                 says: [
 
                     "Choose \"Learn more\" will lead to team introduction,",
 
                     "Choose \"Learn more\" will lead to team introduction,",
 
                     "and learn about team members and collaboration between teams.",
 
                     "and learn about team members and collaboration between teams.",
 
                     "Choose \"Back\", you can re-select the destination."
 
                     "Choose \"Back\", you can re-select the destination."
 
                 ],
 
                 ],
−
                 reply:[
+
                 reply: [
 
                     {
 
                     {
−
                         question:"Learn more",
+
                         question: "Learn more",
−
                         answer:"goTeamworkAndCooperation"
+
                         answer: "goTeamworkAndCooperation"
 
                     },
 
                     },
 
                     {
 
                     {
−
                         question:"Back",
+
                         question: "Back",
−
                         answer:"dest"
+
                         answer: "dest"
 
                     }
 
                     }
 
                 ]
 
                 ]
Line 367: Line 402:
 
             }
 
             }
 
         };
 
         };
−
         goProjectIntroduction=function(){
+
         goProjectIntroduction = function () {
−
             window.location.href="https://2018.igem.org/Team:DLUT_China_B/Description";
+
             window.location.href = "https://2018.igem.org/Team:DLUT_China_B/Description";
 
         };
 
         };
−
         goParts=function(){
+
         goParts = function () {
−
             window.location.href="https://2018.igem.org/Team:DLUT_China_B/PartsOverview";
+
             window.location.href = "https://2018.igem.org/Team:DLUT_China_B/PartsOverview";
 
         };
 
         };
−
         goModel=function(){
+
         goModel = function () {
−
             window.location.href="https://2018.igem.org/Team:DLUT_China_B/ConditionOptimization";
+
             window.location.href = "https://2018.igem.org/Team:DLUT_China_B/ConditionOptimization";
 
         };
 
         };
−
         goAwards=function(){
+
         goAwards = function () {
−
             window.location.href="https://2018.igem.org/Team:DLUT_China_B/AppliedDesign";
+
             window.location.href = "https://2018.igem.org/Team:DLUT_China_B/AppliedDesign";
 
         };
 
         };
−
         goHumanPractice=function(){
+
         goHumanPractice = function () {
 
             console.log('aa');
 
             console.log('aa');
−
             window.location.href="https://2018.igem.org/Team:DLUT_China_B/HumanPractice";
+
             window.location.href = "https://2018.igem.org/Team:DLUT_China_B/HumanPractice";
 
         };
 
         };
−
         goTeamworkAndCooperation=function(){
+
         goTeamworkAndCooperation = function () {
−
             window.location.href="https://2018.igem.org/Team:DLUT_China_B/TeamMembers";
+
             window.location.href = "https://2018.igem.org/Team:DLUT_China_B/TeamMembers";
 
         };
 
         };
  
−
         function isShow($el){
+
         function isShow($el) {
−
             let winH = $(window).height(),
+
             let winH = $(window).height(), /*获取窗口高度*/
−
                 scrollH = $(window).scrollTop(),
+
                 scrollH = $(window).scrollTop(), /*获取窗口滚动高度*/
 
                 top = $el.offsetTop;
 
                 top = $el.offsetTop;
 +
            /*获取元素距离窗口顶部偏移高度*/
 
             return top < scrollH + winH;
 
             return top < scrollH + winH;
 
         }
 
         }
 +
 
         let chatWindow;
 
         let chatWindow;
−
         document.onscroll=function () {
+
 
−
             if(document.getElementById("chat")==null)
+
         function lazyLoad() {
−
                if(isShow(document.getElementById("chatBubbles")))
+
             if (document.getElementById("chat") == null && isShow(document.getElementById("chatBubbles"))) {
−
                 {
+
                 let chat = document.createElement("div");
−
                    let chat=document.createElement("div");
+
                chat.setAttribute("id", "chat");
−
                    chat.setAttribute("id","chat");
+
                document.getElementById("chatBubbles").appendChild(chat);
−
                    document.getElementById("chatBubbles").appendChild(chat);
+
                chatWindow = new Bubbles(document.getElementById("chat"), "chatWindow");
−
                    chatWindow = new Bubbles(document.getElementById("chat"), "chatWindow");
+
                chatWindow.talk(conversation);
−
                    chatWindow.talk(conversation);
+
            }
−
                }
+
         }
−
         };
+
 
 +
        $(document).ready(function () {
 +
            $(window).scroll(function () {
 +
                topToggle();
 +
            });
 +
            $(window).scroll(function () {
 +
                lazyLoad();
 +
            });
 +
        })
 
     </script>
 
     </script>
 
</div>
 
</div>
 
</body>
 
</body>
 
</html>
 
</html>

Revision as of 06:30, 2 October 2018

2018 iGEM_DLUT_B

Circles

a
b
c
d
e
f

Chat Bubbles