Difference between revisions of "Team:SKLBC-DGSYZX"

 
(17 intermediate revisions by 2 users not shown)
Line 1: Line 1:
−
<!--These are the closing tags for div id="mainContainer" and div id="contentContainer". The corresponding opening tags appear in the template that is {{included}} at the top of this page.-->
+
<html>
 +
<head>
 +
<title>Home</title>
 +
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 +
        <meta charset="utf-8">
 +
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 +
        <title>Home</title>
 +
        <link rel="shortcut icon" href="http://snapsvg.io/assets/favicon.ico?v=1">
 +
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
 +
        <script type="text/javascript" async="" src="./Snap.svg - Home_files/ga.js"></script><script src="http://use.edgefonts.net/source-sans-pro:n2,i2,n3,i3,n4,i4,n6,i6,n7,i7,n9,i9:all.js"></script>
 +
        <link rel="stylesheet" href="http://120.25.1.181:8080/www/gdsyzx/sklbc-gdsyzx/css/master.css">
 +
        <script src="./Snap.svg - Home_files/snap.svg-min.js"></script>
 +
        <script type="text/javascript">
 +
    var _gaq = _gaq || [];
 +
    _gaq.push(['_setAccount', 'UA-44948757-1']);
 +
    _gaq.push(['_trackPageview']);
 +
 
 +
    (function() {
 +
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
 +
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
 +
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
 +
    })();
 +
   
 +
    function trackOutboundLink(link, category, action) {
 +
        try {
 +
        _gaq.push(['_trackEvent', category , action]);
 +
        } catch(err){}
 +
       
 +
        setTimeout(function() {
 +
        document.location.href = link.href;
 +
        }, 100);
 +
    }
 +
</script>
 +
<meta name="viewport" content="width=device-width, initial-scale=1">
 +
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 +
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 +
<a href="http://120.25.1.181:8080/www/gdsyzx/sklbc-gdsyzx/index.html"></a></p>
 +
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
 +
<link href="http://120.25.1.181:8080/www/gdsyzx/sklbc-gdsyzx/css/bootstrap.css" rel='stylesheet' type='text/css' />
 +
<link rel="stylesheet" type="text/css" href="http://120.25.1.181:8080/www/gdsyzx/sklbc-gdsyzx/css/wiki.css">
 +
<link href="http://120.25.1.181:8080/www/gdsyzx/sklbc-gdsyzx/css/teamwiki.css" rel='stylesheet' type='text/css' />
 +
<link href="http://120.25.1.181:8080/www/gdsyzx/sklbc-gdsyzx/css/ionicons.css" rel='stylesheet' type='text/css' />
 +
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
 +
<!-- Custom Theme files -->
 +
<link href="http://120.25.1.181:8080/www/gdsyzx/sklbc-gdsyzx/css/style.css" rel='stylesheet' type='text/css' />
 +
<!-- Custom Theme files -->
 +
<!--webfont-->
 +
<link href='http://fonts.useso.com/css?family=Quicksand:300,400,700' rel='stylesheet' type='text/css'>
 +
<link href='http://fonts.useso.com/css?family=Exo+2:100,200,300,400,500,600,700,800,900' rel='stylesheet' type='text/css'>
 +
<script type="text/javascript" src="http://120.25.1.181:8080/www/gdsyzx/sklbc-gdsyzx/js/jquery-1.11.1.min.js"></script>
 +
<script type="text/javascript" src="http://120.25.1.181:8080/www/gdsyzx/sklbc-gdsyzx/js/jquery.min.js"></script>
 +
<script type="text/javascript">
 +
    $(document).ready(function(){
 +
        $("#goToTop").hide()//隐藏go to top按钮
 +
        $(function(){
 +
            $(window).scroll(function(){
 +
                if($(this).scrollTop()>1){//当window的scrolltop距离大于1时，go to top按钮淡出，反之淡入
 +
                    $("#goToTop").fadeIn();
 +
                } else {
 +
                    $("#goToTop").fadeOut();
 +
                }
 +
            });
 +
        });
 +
   
 +
 
 +
        // 给go to top按钮一个点击事件
 +
        $("#goToTop a").click(function(){
 +
            $("html,body").animate({scrollTop:0},800);//点击go to top按钮时，以800的速度回到顶部，这里的800可以根据你的需求修改
 +
            return false;
 +
        });
 +
    });
 +
    </script>
 +
<!------ Light Box ------>
 +
<link rel="stylesheet" href="http://120.25.1.181:8080/www/gdsyzx/sklbc-gdsyzx/css/swipebox.css">
 +
<script src="http://120.25.1.181:8080/www/gdsyzx/sklbc-gdsyzx/js/jquery.swipebox.min.js"></script>
 +
    <script type="text/javascript">
 +
jQuery(function($) {
 +
$(".swipebox").swipebox();
 +
});
 +
</script>
 +
<!------ Eng Light Box ------>  
 +
<!-- Prettify -->
 +
<link href="http://120.25.1.181:8080/www/gdsyzx/sklbc-gdsyzx/css/owl.carousel.css" rel="stylesheet">
 +
<script src="http://120.25.1.181:8080/www/gdsyzx/sklbc-gdsyzx/js/owl.carousel.js"></script>
 +
<script>
 +
$(document).ready(function() {
 +
$("#owl-demo3").owlCarousel({
 +
items : 4,
 +
lazyLoad : true,
 +
autoPlay : true,
 +
navigation: false,
 +
pagination: false,
 +
});
 +
});
 +
</script>
 +
<!----- //End-Share-instantly-slider---->
 +
<!----font-Awesome----->
 +
<link rel="stylesheet" href="http://120.25.1.181:8080/www/gdsyzx/sklbc-gdsyzx/fonts/css/font-awesome.min.css">
 +
<!----font-Awesome----->
 +
</head>
 +
 
 +
<body style="background-color:white">
 +
<header id="header" style="height: inherit;">
 +
    <div class="wrap">
 +
        <a href="./Snap.svg - Home_files/Snap.svg - Home.html" class="logo">
 +
            <img src="http://120.25.1.181:8080/www/gdsyzx/sklbc-gdsyzx/images/synn.jpg" alt="">
 +
            <span class="header">Synsketch</span>
 +
        </a>
 +
        <nav>
 +
           
 +
            <a href="https://2015.igem.org/Team:SKLBC-DGSYZX" class=" selected">Home</a>
 +
           
 +
            <a href="https://2015.igem.org/Team:SKLBC-DGSYZX/Project" class="">Project</a>
 +
           
 +
            <a href="https://2015.igem.org/Team:SKLBC-DGSYZX/Notebook" class="">Notebook</a>
 +
           
 +
            <a href="https://2015.igem.org/Team:SKLBC-DGSYZX/Attributions" class="">Attributions</a>
 +
           
 +
            <a href="https://2015.igem.org/Team:SKLBC-DGSYZX/Collaborations" class="">Collaborations</a>
 +
           
 +
            <a href="https://2015.igem.org/Team:SKLBC-DGSYZX/Pratices" class="">Human Pratices</a>
 +
           
 +
            <a href="https://2015.igem.org/Team:SKLBC-DGSYZX/Parts" class="">Parts</a>
 +
           
 +
            <a href="https://2015.igem.org/Team:SKLBC-DGSYZX/Safety" class="">Safety</a>
 +
           
 +
            <a href="https://2015.igem.org/Team:SKLBC-DGSYZX/Software" class="">Software</a>
 +
           
 +
            <a href="https://2015.igem.org/Team:SKLBC-DGSYZX/Entrepreneurship" class="">Entrepreneurship</a>
 +
           
 +
            <a href="https://2015.igem.org/Team:SKLBC-DGSYZX/Team" class="">Team</a>
 +
           
 +
            <a href="https://2015.igem.org/Team:SKLBC-DGSYZX/Medals" class="">Medals and Prizes</a>
 +
           
 +
            <a href="https://2015.igem.org/Team:SKLBC-DGSYZX/Design" class="">Design</a>
 +
           
 +
        </nav>
 +
    </div>
 +
</header>
 +
<br><br>
 +
        <article>
 +
<section class="" style="background: #87cefa">
 +
    <div class="wrap saw reverse a">
 +
        <a href="https://2015.igem.org/Team:SKLBC-DGSYZX/Project" style="font-size: 100px;color: white;">Project</a>
 +
       
 +
    </div>
 +
</section>
 +
 
 +
<section class="secondary" style="background: #ffb6c1">
 +
    <div class="wrap saw reverse b">
 +
        <a href="https://2015.igem.org/Team:SKLBC-DGSYZX/Notebook" style="font-size: 100px;color: white;">Notebook</a>
 +
</section>
 +
 
 +
<section class="" style="background: #696969">
 +
    <div class="wrap saw reverse c">
 +
        <a href="https://2015.igem.org/Team:SKLBC-DGSYZX/Attributions" style="font-size: 100px;color: white;">Attributions</a>
 +
       
 +
    </div>
 +
</section>
 +
 
 +
<section class="secondary" style="background: #00fa9a">
 +
    <div class="wrap saw reverse d">
 +
        <a href="https://2015.igem.org/Team:SKLBC-DGSYZX/Collaborations" style="font-size: 100px;color: white;">Collaborations</a>
 +
</section><section class="" style="background: #bc8f8f">
 +
    <div class="wrap saw reverse e">
 +
        <a href="https://2015.igem.org/Team:SKLBC-DGSYZX/Pratices" style="font-size: 100px;color: white;">Human Pratices</a>
 +
       
 +
    </div>
 +
</section>
 +
 
 +
<section class="secondary" style="background: #9370db">
 +
    <div class="wrap saw reverse f">
 +
        <a href="https://2015.igem.org/Team:SKLBC-DGSYZX/Parts" style="font-size: 100px;color: white;">Parts</a>
 +
</section>
 +
 
 +
<section class="" style="background: #ffa071">
 +
    <div class="wrap saw reverse i">
 +
        <a href="https://2015.igem.org/Team:SKLBC-DGSYZX/Software" style="font-size: 100px;color: white;">Software</a>
 +
       
 +
    </div>
 +
</section>
 +
 
 +
<section class="secondary" style="background: #ffb6c1">
 +
    <div class="wrap saw reverse j">
 +
        <a href="https://2015.igem.org/Team:SKLBC-DGSYZX/Entrepreneurship" style="font-size: 100px;color: white;">Entrepreneurship</a>
 +
</section>
 +
 
 +
<section class="" style="background: #dda0dd">
 +
    <div class="wrap saw reverse k">
 +
        <a href="https://2015.igem.org/Team:SKLBC-DGSYZX/Medals" style="font-size: 100px;color: white;">Medals and Prizes</h>
 +
    </div>
 +
</section>
 +
 
 +
 
 +
 
 +
<script>
 +
    var logo = Snap.select("#snap-logo").attr({opacity:0});
 +
    window.onload = function () {
 +
 
 +
        var parts = [
 +
                ['top', 0, 20],
 +
                ['left', 20, 0],
 +
                ['bottom', 0, -20],
 +
                ['right', -20, 0]
 +
            ],
 +
            components = [],
 +
            i = 0,
 +
            k = 0,
 +
            isLogoAnimated = false,
 +
            isCrocAnimated = false,
 +
            isCroc2Animated = false;
 +
 
 +
        for (i = 0; i < parts.length; i++) {
 +
            var el = parts[i]
 +
                elid = el[0];
 +
                element = logo.select("#" + elid);
 +
            element.attr({opacity:0, transform: "t" + (el[1]) + "," + (el[2])});
 +
            components.push(element);
 +
        }
 +
 
 +
        function animateEach() {
 +
            if (!components[k]) return;
 +
            components[k].animate({
 +
                transform: "t" + (0) + "," + (0),
 +
                opacity: 1
 +
            }, 250, mina.easeout);
 +
            setTimeout(animateEach, 150);
 +
            k++;
 +
        };
 +
 
 +
 
 +
        // crocodile
 +
 
 +
        var croc = Snap.select("#crocodile"),
 +
            head = croc.select("#upper-head"),
 +
            jaw = croc.select("#upper-jaw"),
 +
            symbol = croc.select("#symbol"),
 +
            clearId = [],
 +
            scrollTop = 0;
 +
           
 +
        var pivots = [
 +
            [44, 147],
 +
            [92, 126]
 +
        ];
 +
 
 +
        function clearTimer() {
 +
            for (var i = 0; i < clearId.length; i++) {
 +
                clearTimeout(clearId[i]);
 +
            }
 +
            clearId = [];
 +
        }
 +
 
 +
        function close() {
 +
            clearTimer();
 +
 
 +
            head.animate({
 +
                transform: "r" + [8, pivots[0][0], pivots[0][1]]
 +
            }, 500, mina.backin);
 +
           
 +
            jaw.animate({
 +
                transform: "r" + [37, pivots[1][0], pivots[1][1]]
 +
            }, 500, mina.backin);
 +
 
 +
            clearId.push( setTimeout(function() {
 +
                symbol.animate({
 +
                    transform: "t" + (-70) + "," + (40) + "r" + (40)
 +
                }, 100);
 +
            }, 400));
 +
        }
 +
 
 +
        function open() {
 +
            clearTimer();
 +
 
 +
            head.animate({
 +
                transform: "r" + [0, pivots[0][0], pivots[0][1]]
 +
            }, 700, mina.elastic);
 +
           
 +
            jaw.animate({
 +
                transform: "r" + [0, pivots[1][0], pivots[1][1]]
 +
            }, 700, mina.elastic);
 +
 
 +
            symbol.animate({
 +
                transform: "t" + (0) + "," + (0) + "r" + (0)
 +
            }, 500, mina.elastic);
 +
        }
 +
 
 +
 
 +
        croc.hover(open,
 +
            function() {
 +
                clearId.push(setTimeout(close, 200));
 +
        });
 +
 
 +
 
 +
        // crocodile-2
 +
 
 +
        var diagramgroup = Snap.select("#crocodile-2"),
 +
            elements = {},
 +
            elementkeys = ['map', 'pie', 'eye'],
 +
            diagramtimer = [],
 +
            animating = {},
 +
            cleartimers = {},
 +
            i = 0, j = 0;
 +
 
 +
        function show(key) {
 +
            if (animating[key]) return;
 +
            clearTimeout(cleartimers[key]);
 +
            animating[key] = true;
 +
            var element = elements[key],
 +
            x = element[0].getBBox().x,
 +
            offset = x/2 + 25;
 +
            element[0].attr({
 +
                transform: "t"+offset+",80s0.5,0.5,0,0"
 +
            });
 +
            setTimeout(function() {
 +
                    element[0].animate({opacity:1,transform:"t0,0s1,1,0,0"}, 500, mina.elastic);
 +
            }, 50);
 +
            element[1].animate({opacity:0.25}, 400);
 +
            setTimeout(function(){animating[key] = false}, 550);
 +
        }
 +
 
 +
        function showAll() {
 +
            j = 0;
 +
            function cycle() {
 +
                show(elementkeys[j]);
 +
                j++;
 +
                if (j < elementkeys.length) setTimeout(cycle, 200);
 +
            }
 +
            cycle();
 +
        }
 +
 
 +
        function hoverIn() {
 +
            show( this.node.id.replace('hit-', '') );
 +
        }
 +
 
 +
 
 +
        for (i = 0; i < elementkeys.length; i++) {
 +
            var key = elementkeys[i],
 +
            diagram = diagramgroup.select("#diagram-" + key).attr({opacity:0}),
 +
            path = diagramgroup.select("#path-" + key).attr({opacity:0}),
 +
            hitarea = diagramgroup.select("#hit-" + key);
 +
            hitarea.hover(hoverIn);
 +
            elements[key] = [diagram, path];
 +
        }
 +
 
 +
 
 +
        // scroll events
 +
 
 +
        function checkScroll(e) {
 +
            // alert(window.scrollY);
 +
            if (isLogoAnimated && isCrocAnimated && isCroc2Animated) return;
 +
            var scrollY = window.scrollY || window.pageYOffset;
 +
            if (scrollY > 250 && scrollY < 600 && !isCrocAnimated) {
 +
                clearId.push( setTimeout(close, 200) );
 +
                isCrocAnimated = true;
 +
            }
 +
 
 +
            if (scrollY < 200 && !isLogoAnimated) {         
 +
                logo.attr({opacity:1});
 +
                setTimeout(animateEach, 100);
 +
                isLogoAnimated = true;
 +
            }
 +
 
 +
            if (scrollY > 800 && scrollY < 1100 && !isCroc2Animated) {
 +
                setTimeout(showAll, 100);
 +
                isCroc2Animated = true;
 +
            }
 +
        };
 +
 
 +
        window.onscroll = checkScroll;
 +
        setTimeout(checkScroll, 50);
 +
 
 +
    };
 +
    </script>
 +
 
 +
        </article>
 +
 
 +
   
 +
 
 +
</body></html>

Latest revision as of 08:28, 18 September 2015

Home Home



Project
Notebook
Attributions
Collaborations
Human Pratices
Parts
Software
Entrepreneurship
Medals and Prizes