Difference between revisions of "Team:NKU China/test"

Line 2: Line 2:
 
<html>
 
<html>
 
<head>
 
<head>
−
<title>Team</title>
+
   
−
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
+
−
<meta name="description" content="Made with WOW Slider - Create beautiful, responsive image sliders in a few clicks. Awesome skins and animations. Image slider" />
+
−
+
−
<!-- Start WOWSlider.com HEAD section --> <!-- add to the <head> of your page -->
+
−
<link rel="stylesheet" href="https://2016.igem.org/Template:NKU_China/css/wowslider/Home-team?action=raw&ctype=text/css"/>
+
−
<script src="https://2016.igem.org/Template:NKU_China/js/jquery?action=raw&ctype=text/javascript"></script>
+
−
<!-- End WOWSlider.com HEAD section -->
+
  
 +
    <!--separatrix-->
 +
    <link rel="stylesheet" href="https://2016.igem.org/Template:NKU_China/css/wowslider/Home-team?action=raw&ctype=text/css">
 +
    <link rel="stylesheet" href="css/style.css">
 +
    <style>
 +
        main {
 +
            width: 98vw;
 +
            height: calc(100vh - 18px);
 +
            position: relative;
 +
        }
 +
 +
        .window {
 +
            width: 4vw;
 +
            height: 4vw;
 +
            position: absolute;
 +
        }
 +
 +
        #window1 ,#window4 .window-placeholder {
 +
            left: 0;
 +
            top: 0;
 +
        }
 +
 +
        #window2 ,#window3 .window-placeholder {
 +
            right: 0;
 +
            top: 0;
 +
        }
 +
 +
        #window3 ,#window2 .window-placeholder {
 +
            left: 0;
 +
            bottom: 0;
 +
        }
 +
 +
        #window4 ,#window1 .window-placeholder {
 +
            right: 0;
 +
            bottom: 0;
 +
            /*height:calc(100vh - 18px - 8vw);*/
 +
        }
 +
 +
        .window > div {
 +
           
 +
        }
 +
 +
        .window-placeholder {
 +
            width: 20px;
 +
            height: 20px;
 +
            position:absolute;
 +
            z-index:15;
 +
        }
 +
 +
        .window-placeholder img {
 +
            width: 100%;
 +
            height: 100%;
 +
        }
 +
 +
        .window-content {
 +
            width: 100%;
 +
            height: 100%;
 +
            display:none;
 +
        }
 +
 +
        #wowslider-wrapper {
 +
            margin: auto;
 +
        }
 +
 +
        #wowslider-container1 {
 +
            margin: 0;
 +
        }
 +
    </style>
 +
    <script>
 +
        var vw = 0;
 +
        var vh = 0;
 +
        function calibrate_ruler() {
 +
            vw = $('#ruler').width();
 +
            vh = $('#ruler').height();
 +
        };
 +
 +
        var exit_full_screen_png = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAP5JREFUeNrsV+0NgyAQPS4dwAkau4Ej2clko7pBSRexh6XmQpGPivCHl1w0fLz3QJADgLBcoaN4UEzgQag+po2uN1odWOKLicnTcYkwEOQw8TFhiTtN8I6RBrwc3ARS3ezgGb8E5jlCOmI4ZhFooCh6XiBeIEIzEOIwkMR1F9biCY70DwOwJ65fkBHrAgnnYxNfdR0jeO5MWY4ZUNT/xgvQsYf7E0ff27sDU9dABozcBBYW/zFxqSDOTTQ0NDSASP0RZTqOt5MRCx7DzmMZC+cCLSFpCUlyQqIyCCqfCfSIS/O95MEFt8exmtAzMPhW6oHdEcMx1L+c1r6evwUYACKt3Vlo4XE8AAAAAElFTkSuQmCC';
 +
        var full_screen_png = 'data:image/png;base64,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'
 +
 +
        function window_after(win) {
 +
            function window1_after() {
 +
 +
            };
 +
            function window2_after() {
 +
 +
            };
 +
            function window3_after() {
 +
 +
            };
 +
            function window4_after() {
 +
                var window_content = win.children('.window-content');
 +
                if (window_content.width() / window_content.height() > 4 / 3) {
 +
                    $('#wowslider-wrapper').height(window_content.height())
 +
                    $('#wowslider-wrapper').width(window_content.height() / 3 * 4)
 +
                }
 +
                else {
 +
                    $('#wowslider-wrapper').width(window_content.width())
 +
                    $('#wowslider-wrapper').height(window_content.width() / 4 * 3)
 +
                }
 +
 +
            };
 +
 +
            switch(win.attr('id')) {
 +
                case "window1": window1_after();
 +
                    break;
 +
                case "window2": window2_after();
 +
                    break;
 +
                case "window3": window3_after();
 +
                    break;
 +
                case "window4": window4_after();
 +
                    break;
 +
            }
 +
        };
 +
 +
        function log(message) {
 +
            console.log(message);
 +
        }
 +
 +
    </script>
 +
    <script>
 +
 +
        $(function () {
 +
            $('.window-placeholder img').attr('src', full_screen_png);
 +
 +
            calibrate_ruler();
 +
            $(window).resize(calibrate_ruler)
 +
 +
            function open(win) {
 +
                win.children('.window-placeholder').children('img').attr('src', exit_full_screen_png);
 +
                win.children('.window-content').show();
 +
                win.css('opacity', 0);
 +
                win.animate({
 +
                    width: '94vw',
 +
                    height: 100*vh-4*vw-18,
 +
                    opacity:1,
 +
                }, 2000, function () {
 +
                    window_after(win);
 +
                });
 +
            }
 +
            function close(win) {
 +
                win.animate({
 +
                    width: '4vw',
 +
                    height: '4vw',
 +
                    opacity: 0,
 +
                }, 2000, function () {
 +
                    win.children('.window-placeholder').children('img').attr('src', full_screen_png);
 +
                    win.children('.window-content').hide();
 +
                    win.css('opacity', 1);
 +
                });
 +
               
 +
            }
 +
 +
            open($('#window1'))
 +
            close($('#window1'))
 +
            setTimeout(function () { open($('#window2')); close($('#window2')) }, 4000)
 +
            setTimeout(function () { open($('#window3')); close($('#window3')) }, 8000)
 +
            setTimeout(function () { open($('#window4')); close($('#window4')) }, 12000)
 +
            setTimeout(function () { open($('#window4')) }, 17000)
 +
 +
            $('.window-placeholder img').each(function (index, value) {
 +
                $(value).click(function () {
 +
                   
 +
                    if($(value).attr('src') == full_screen_png )
 +
                        open($('#window' + (index+1)))
 +
                    else
 +
                        close($('#window' + (index + 1)))
 +
                })
 +
               
 +
 +
            })
 +
 +
 +
        })
 +
    </script>
 
</head>
 
</head>
−
<body style="background-color:transparent;margin:auto">
+
<body>
−
+
    <div id="ruler" style="display:none;width:1vw;height:1vh;"></div>
−
<!-- Start WOWSlider.com BODY section --> <!-- add to the <body> of your page -->
+
    <div>haha</div>
−
<div id="wowslider-container1">
+
    <div>haha</div>
−
<div class="ws_images"><ul>
+
    <div>haha</div>
−
<li><img src="https://static.igem.org/mediawiki/2016/d/dc/T--NKU_China--whole-group-4-3-1366.jpg" alt="Mingqiag Qiao" title="Mingqiag Qiao" id="wows1_0"/></li>
+
    <div>haha</div>
−
<li><img src="https://static.igem.org/mediawiki/2016/f/fc/T--NKU_China--xiongyuxiu-4-3-1366.jpg" alt="Xiong Yvxiu" title="Xiong Yvxiu" id="wows1_1"/></li>
+
    <div>haha</div>
−
<li><img src="https://static.igem.org/mediawiki/2016/1/19/T--NKU_China--chenchen-1366.jpg" alt="Chen Chen" title="Chen Chen" id="wows1_2"/></li>
+
    <div>haha</div>
−
<li><img src="https://static.igem.org/mediawiki/2016/3/3a/T--NKU_China--liuxiao-4-3-1366.jpg" alt="Xiao Liu" title="Xiao Liu" id="wows1_3"/></li>
+
    <div>haha</div>
−
<li><img src="https://static.igem.org/mediawiki/2016/b/be/T--NKU_China--dailiangti-1366.jpg" alt="Liangti Dai" title="Liangti Dai" id="wows1_4"/></li>
+
    <div>haha</div>
−
<li><img src="https://static.igem.org/mediawiki/2016/a/a6/T--NKU_China--dongzhuoer-1366.jpg" alt="Zhuoer Dong" title="Zhuoer Dong" id="wows1_5"/></li>
+
    <div>haha</div>
−
<li><img src="https://static.igem.org/mediawiki/2016/c/c6/T--NKU_China--zhaoxianglin-1366.jpg" alt="Zhao xianglin" title="Zhao xianglin" id="wows1_6"/></li>
+
    <div>haha</div>
−
<li><img src="https://static.igem.org/mediawiki/2016/4/44/T--NKU_China--mengfankang-1366.jpg" alt="Fankang Meng" title="Fankang Meng" id="wows1_7"/></li>
+
    <div>haha</div>
−
<li><img src="https://static.igem.org/mediawiki/2016/f/f0/T--NKU_China--songcunjiang-1366.jpg" alt="Cunjiang Song" title="Cunjiang Song" id="wows1_8"/></li>
+
    <div>haha</div>
−
<li><img src="https://static.igem.org/mediawiki/2016/4/4c/T--NKU_China--zhangmengxian-1366.jpg" alt="Zhang Mengxian" title="Zhang Mengxian" id="wows1_9"/></li>
+
    <div>haha</div>
−
<li><img src="https://static.igem.org/mediawiki/2016/6/68/T--NKU_China--songxinghao-1366.jpg" alt="Xinhao Song" title="Xinhao Song" id="wows1_10"/></li>
+
    <div>haha</div>
−
<li><img src="https://static.igem.org/mediawiki/2016/d/dc/T--NKU_China--zhangzhaoran-4-3-1366.jpg" alt="Zhaoran Zhang" title="Zhaoran Zhang" id="wows1_11"/></li>
+
    <div>haha</div>
−
<li><a href="http://wowslider.com/vi"><img src="https://static.igem.org/mediawiki/2016/c/ca/T--NKU_China--maxinyu-1366.jpg" alt="slider" title="Ma Xinyu" id="wows1_12"/></a></li>
+
    <div>haha</div>
−
<li><img src="https://static.igem.org/mediawiki/2016/1/10/T--NKU_China--qiaomingqiang-4-3-1366.jpg" alt="qiaomingqiang-4-3" title="qiaomingqiang-4-3" id="wows1_13"/></li>
+
    <main>
−
</ul></div>
+
        <div id="window1" class="window">
−
<div class="ws_bullets"><div>
+
            <div class="window-placeholder"><img src=""></div>         
−
<a href="#" title="Mingqiag Qiao"><span>1</span></a>
+
            <div class="window-content" style="background-color:aqua">
−
<a href="#" title="Xiong Yvxiu"><span>2</span></a>
+
                <div class="p" style="font-size:10rem">
−
<a href="#" title="Chen Chen"><span>3</span></a>
+
                    Project
−
<a href="#" title="Xiao Liu"><span>4</span></a>
+
                </div>
−
<a href="#" title="Liangti Dai"><span>5</span></a>
+
               
−
<a href="#" title="Zhuoer Dong"><span>6</span></a>
+
            </div>
−
<a href="#" title="Zhao xianglin"><span>7</span></a>
+
        </div>
−
<a href="#" title="Fankang Meng"><span>8</span></a>
+
        <div id="window2" class="window">
−
<a href="#" title="Cunjiang Song"><span>9</span></a>
+
            <div class="window-placeholder"><img src=""></div>
−
<a href="#" title="Zhang Mengxian"><span>10</span></a>
+
            <div class="window-content" style="background-color:blue">
−
<a href="#" title="Xinhao Song"><span>11</span></a>
+
                <div class="p" style="font-size:10rem">
−
<a href="#" title="Zhaoran Zhang"><span>12</span></a>
+
                    Human Pratice
−
<a href="#" title="Ma Xinyu"><span>13</span></a>
+
                </div>
−
<a href="#" title="qiaomingqiang-4-3"><span>14</span></a>
+
               
−
</div></div><div class="ws_script" style="position:absolute;left:-99%"><a href="http://wowslider.com/vi">image slider</a> by WOWSlider.com v8.7</div>
+
            </div>
−
<div class="ws_shadow"></div>
+
        </div>
−
</div>
+
        <div id="window3" class="window">
−
<script src="https://2016.igem.org/Template:NKU_China/js/wowslider/Home-team?action=raw&ctype=text/javascript"></script>
+
            <div class="window-placeholder"><img src=""></div>
−
<script src="https://2016.igem.org/Template:NKU_China/js/script/Home-team?action=raw&ctype=text/javascript"></script>
+
            <div class="window-content" style="background-color:cyan">
−
<!-- End WOWSlider.com BODY section -->
+
                <div class="p" style="font-size:10rem">
 +
                    Results
 +
                </div>
 +
               
 +
            </div>
 +
        </div>
 +
        <div id="window4" class="window">
 +
            <div class="window-placeholder"><img src=""></div>
 +
            <div class="window-content">
 +
                <div id="wowslider-wrapper">
 +
                    <div id="wowslider-container1">
 +
                        <div class="ws_images">
 +
                            <ul>
 +
                                <li><img src="https://static.igem.org/mediawiki/2016/d/dc/T--NKU_China--whole-group-4-3-1366.jpg" alt="Team" title="Team" id="wows1_0" /></li>
 +
                                <li><img src="https://static.igem.org/mediawiki/2016/f/fc/T--NKU_China--xiongyuxiu-4-3-1366.jpg" alt="Yuxiu Xiong" title="Yuxiu Xiong" id="wows1_1" /></li>
 +
                                <li><img src="https://static.igem.org/mediawiki/2016/1/19/T--NKU_China--chenchen-1366.jpg" alt="Chen Chen" title="Chen Chen" id="wows1_2" /></li>
 +
                                <li><img src="https://static.igem.org/mediawiki/2016/3/3a/T--NKU_China--liuxiao-4-3-1366.jpg" alt="Xiao Liu" title="Xiao Liu" id="wows1_3" /></li>
 +
                                <li><img src="https://static.igem.org/mediawiki/2016/b/be/T--NKU_China--dailiangti-1366.jpg" alt="Liangti Dai" title="Liangti Dai" id="wows1_4" /></li>
 +
                                <li><img src="https://static.igem.org/mediawiki/2016/a/a6/T--NKU_China--dongzhuoer-1366.jpg" alt="Zhuoer Dong" title="Zhuoer Dong" id="wows1_5" /></li>
 +
                                <li><img src="https://static.igem.org/mediawiki/2016/c/c6/T--NKU_China--zhaoxianglin-1366.jpg" alt="Xianglin Zhao" title="Xianglin Zhao" id="wows1_6" /></li>
 +
                                <li><img src="https://static.igem.org/mediawiki/2016/4/44/T--NKU_China--mengfankang-1366.jpg" alt="Fankang Meng" title="Fankang Meng" id="wows1_7" /></li>
 +
                                <li><img src="https://static.igem.org/mediawiki/2016/f/f0/T--NKU_China--songcunjiang-1366.jpg" alt="Cunjiang Song" title="Cunjiang Song" id="wows1_8" /></li>
 +
                                <li><img src="https://static.igem.org/mediawiki/2016/4/4c/T--NKU_China--zhangmengxian-1366.jpg" alt="Mengxian Zhang" title="Mengxian Zhang" id="wows1_9" /></li>
 +
                                <li><img src="https://static.igem.org/mediawiki/2016/6/68/T--NKU_China--songxinghao-1366.jpg" alt="Xinhao Song" title="Xinhao Song" id="wows1_10" /></li>
 +
                                <li><img src="https://static.igem.org/mediawiki/2016/d/dc/T--NKU_China--zhangzhaoran-4-3-1366.jpg" alt="Zhaoran Zhang" title="Zhaoran Zhang" id="wows1_11" /></li>
 +
                                <li><img src="https://static.igem.org/mediawiki/2016/c/ca/T--NKU_China--maxinyu-1366.jpg" alt="Ma Xinyu" title="Ma Xinyu" id="wows1_12" /></li>
 +
                                <li><a href="http://wowslider.com"><img src="https://static.igem.org/mediawiki/2016/1/10/T--NKU_China--qiaomingqiang-4-3-1366.jpg" alt="wowslider" title="Mingqiang Qiao" id="wows1_13" /></a></li>
 +
                                <li><img src="https://static.igem.org/mediawiki/2016/1/1f/T--NKU_China--shifuchen-1366.jpg" alt="Fuchen Shi" title="Fuchen Shi" id="wows1_14" /></li>
 +
                            </ul>
 +
                        </div>
 +
                        <div class="ws_bullets">
 +
                            <div>
 +
                                <a href="#" title="Team"><span>1</span></a>
 +
                                <a href="#" title="Yuxiu Xiong"><span>2</span></a>
 +
                                <a href="#" title="Chen Chen"><span>3</span></a>
 +
                                <a href="#" title="Xiao Liu"><span>4</span></a>
 +
                                <a href="#" title="Liangti Dai"><span>5</span></a>
 +
                                <a href="#" title="Zhuoer Dong"><span>6</span></a>
 +
                                <a href="#" title="Xianglin Zhao"><span>7</span></a>
 +
                                <a href="#" title="Fankang Meng"><span>8</span></a>
 +
                                <a href="#" title="Cunjiang Song"><span>9</span></a>
 +
                                <a href="#" title="Mengxian Zhang"><span>10</span></a>
 +
                                <a href="#" title="Xinhao Song"><span>11</span></a>
 +
                                <a href="#" title="Zhaoran Zhang"><span>12</span></a>
 +
                                <a href="#" title="Ma Xinyu"><span>13</span></a>
 +
                                <a href="#" title="Mingqiang Qiao"><span>14</span></a>
 +
                                <a href="#" title="Fuchen Shi"><span>15</span></a>
 +
                            </div>
 +
                        </div>
 +
                        <div class="ws_shadow"></div>
 +
                    </div>
 +
                    <script type="text/javascript" src="https://2016.igem.org/Template:NKU_China/js/wowslider?action=raw&ctype=text/javascript"></script>
 +
                    <script type="text/javascript" src="https://2016.igem.org/Template:NKU_China/js/script/Home-team?action=raw&ctype=text/javascript"></script>
 +
                </div>
 +
            </div>
 +
        </div>
 +
    </main>
 +
 
  
 
</body>
 
</body>
 
</html>
 
</html>

Revision as of 14:25, 27 August 2016

haha
haha
haha
haha
haha
haha
haha
haha
haha
haha
haha
haha
haha
haha
haha
haha
Project
Human Pratice
Results
  • Team
  • Yuxiu Xiong
  • Chen Chen
  • Xiao Liu
  • Liangti Dai
  • Zhuoer Dong
  • Xianglin Zhao
  • Fankang Meng
  • Cunjiang Song
  • Mengxian Zhang
  • Xinhao Song
  • Zhaoran Zhang
  • Ma Xinyu
  • wowslider
  • Fuchen Shi
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15