Team:ZJU-China/Notebook/week1

From 2011.igem.org

(Difference between revisions)
 
(41 intermediate revisions not shown)
Line 1: Line 1:
-
{{Template:Zjucss_header}}
+
<html>  
-
{{Template:Zjujs_header}}
+
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+
-
<html xmlns="http://www.w3.org/1999/xhtml">
+
-
<head>
+
-
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+
-
<title></title>
+
-
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+
-
<meta http-equiv="Content-Style-Type" content="text/css" />
+
-
<meta http-equiv="Content-Script-Type" content="text/javascript" />
+
-
<link rel="stylesheet" type="text/css" href="css/index.css" />
+
-
<link href='http://fonts.googleapis.com/css?family=Molengo' rel='stylesheet' type='text/css'>
+
-
<link href='http://fonts.googleapis.com/css?family=Hammersmith+One' rel='stylesheet' type='text/css' >
+
-
<!-- The JavaScript -->
+
<head>
-
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
+
<style type="text/css">
-
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
+
-
<script type="text/javascript">
+
-
    $(function() {
+
-
        var $menu = $('#ei_menu > ul'),
+
-
            $menuItems = $menu.children('li'),
+
-
            $menuItemsImgWrapper= $menuItems.children('a'),
+
-
            $menuItemsPreview = $menuItemsImgWrapper.children('.ei_preview'),
+
-
            totalMenuItems = $menuItems.length,
+
-
       
+
-
            ExpandingMenu = (function(){
+
-
                /*
+
-
                    @current
+
-
                    set it to the index of the element you want to be opened by default,
+
-
                    or -1 if you want the menu to be closed initially
+
-
                */
+
-
                var current = 2,
+
-
                /*
+
-
                    @anim
+
-
                    if we want the default opened item to animate initialy set this to true
+
-
                */
+
-
                anim = false,
+
-
                /*
+
-
                    checks if the current value is valid -
+
-
                    between 0 and the number of items
+
-
                */
+
-
                validCurrent = function() {
+
-
                    return (current >= 0 && current < totalMenuItems);
+
-
                },
+
-
                init = function() {
+
-
                        /* show default item if current is set to a valid index */
+
-
                    if(validCurrent())
+
-
                        configureMenu();
+
-
                    initEventsHandler();
+
-
                },
+
-
                configureMenu = function() {
+
-
                        /* get the item for the current */
+
-
                    var $item = $menuItems.eq(current);
+
-
                        /* if anim is true slide out the item */
+
-
                    if(anim)
+
-
                        slideOutItem($item, true, 900, 'easeInQuint');
+
-
                    else{
+
-
                            /* if not just show it */
+
-
                        $item.css({width : '400px'})
+
-
                        .find('.ei_image')
+
-
                        .css({left:'0px', opacity:1});
+
-
                            /* decrease the opacity of the others */
+
#banner {position:relative; width:950px; height:345px; border:1px solid #666; overflow:hidden;}
-
                            $menuItems.not($item)
+
#banner_list img {border:0px;width:950px; height:343px;}
-
                                      .children('.ei_preview')
+
-
                                      .css({opacity:0.5});
+
-
                    }
+
-
                },
+
-
                initEventsHandler = function() {
+
-
                        /*
+
-
                        when we click an item the following can happen:
+
-
                        1) The item is already opened - close it!
+
-
                        2) The item is closed - open it! (if another one is opened, close it!)
+
-
                        */
+
-
                    $menuItemsImgWrapper.bind('click.ExpandingMenu', function(e) {
+
-
                        var $this = $(this).parent(),
+
-
                        idx = $this.index();
+
-
                        if(current === idx) {
+
#banner ul {position:absolute;list-style-type:none;filter: Alpha(Opacity=80);opacity:0.8; border:1px solid #fff;z-index:1002;
-
                            slideOutItem($menuItems.eq(current), false, 1500, 'easeOutQuint', true);
+
            margin:0; padding:0; bottom:3px; right:5px;}
-
                            current = -1;
+
#banner ul li { padding:0px 8px;float:left;display:block;color:#FFF;border:#e5eaff 1px solid;background:#6f4f67;cursor:pointer}
-
                        }
+
#banner ul li.on { background:#900}
-
                        else{
+
#banner_list a{position:absolute;} <!-- 让四张图片都可以重叠在一起-->
-
                            if(validCurrent() && current !== idx)
+
</style>
-
                                    slideOutItem($menuItems.eq(current), false, 250, 'jswing');
+
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
 +
</head>
 +
 +
<body>
-
                            current = idx;
+
<script type="text/javascript">
-
                                slideOutItem($this, true, 250, 'jswing');
+
    var t = n = 0, count;
-
                        }
+
    $(document).ready(function(){  
-
                        return false;
+
        count=$("#banner_list a").length;
-
                    });
+
        $("#banner_list a:not(:first-child)").hide();
-
                },
+
        $("#banner_info").html($("#banner_list a:first-child").find("img").attr('alt'));
-
                    /* if you want to trigger the action to open a specific item */
+
        $("#banner_info").click(function(){window.open($("#banner_list a:first-child").attr('href'), "_blank")});
-
                    openItem = function(idx) {
+
        $("#banner li").click(function() {
-
                        $menuItemsImgWrapper.eq(idx).click();
+
            var i = $(this).text() - 1;//获取Li元素内的值，即1，2，3，4
-
                    },
+
            n = i;
-
                    /*
+
            if (i >= count) return;
-
                    opens or closes an item
+
            $("#banner_info").html($("#banner_list a").eq(i).find("img").attr('alt'));
-
                    note that "mLeave" is just true when all the items close,
+
            $("#banner_info").unbind().click(function(){window.open($("#banner_list a").eq(i).attr('href'), "_blank")})
-
                    in which case we want that all of them get opacity 1 again.
+
            $("#banner_list a").filter(":visible").fadeOut(500).parent().children().eq(i).fadeIn(1000);
-
                    "dir" tells us if we are opening or closing an item (true | false)
+
            document.getElementById("banner").style.background="";
-
                    */
+
            $(this).toggleClass("on");
-
                slideOutItem = function($item, dir, speed, easing, mLeave) {
+
            $(this).siblings().removeAttr("class");
-
                    var $ei_image = $item.find('.ei_image'),
+
        });
-
 
+
        t = setInterval("showAuto()", 4000);
-
                    itemParam = (dir) ? {width : '400px'} : {width : '120px'},
+
        $("#banner").hover(function(){clearInterval(t)}, function(){t = setInterval("showAuto()", 4000);});
-
                    imageParam = (dir) ? {left : '0px'} : {left : '120px'};
+
    })
-
 
+
-
                        /*
+
-
                        if opening, we animate the opacity of all the elements to 0.1.
+
-
                        this is to give focus on the opened item..
+
-
                        */
+
-
                    if(dir)
+
-
                    /*
+
-
                            alternative:
+
-
                            $menuItemsPreview.not($menuItemsPreview.eq(current))
+
-
                                            .stop()
+
-
                                            .animate({opacity:0.1}, 500);
+
-
                    */
+
-
                        $menuItemsPreview.stop()
+
-
                    .animate({opacity:0.5}, 1000);
+
-
                    else if(mLeave)
+
-
                        $menuItemsPreview.stop()
+
-
                    .animate({opacity:1}, 1500);
+
-
 
+
-
                        /* the <li> expands or collapses */
+
-
                    $item.stop().animate(itemParam, speed, easing);
+
-
                        /* the image (color) slides in or out */
+
-
                    $ei_image.stop().animate(imageParam, speed, easing, function() {
+
-
                            /*
+
-
                            if opening, we animate the opacity to 1,
+
-
                            otherwise we reset it.
+
-
                            */
+
-
                        if(dir)
+
-
                            $ei_image.animate({opacity:1}, 2000);
+
-
                        else
+
-
                            $ei_image.css('opacity', 0.5);
+
-
                    });
+
-
                };
+
-
 
+
-
                return {
+
-
                    init : init,
+
-
                    openItem : openItem
+
-
                };
+
-
            })();
+
-
           
+
-
        /*
+
-
        call the init method of ExpandingMenu
+
-
        */
+
-
        ExpandingMenu.init();
+
      
      
-
     /*
+
     function showAuto()
-
     if later on you want to open / close a specific item you could do it like so:
+
     {
-
    ExpandingMenu.openItem(3); // toggles item 3 (zero-based indexing)
+
        n = n >=(count - 1) ? 0 : ++n;
-
    */
+
        $("#banner li").eq(n).trigger('click');
-
     });
+
     }
</script>
</script>
-
       
 
-
<style type="text/css">
 
-
<!--
 
-
.header {
 
-
background-image: url(http://ung.igem.org/wiki/images/1/1c/Header-end.jpg);
 
-
background-color:#e9e9e9;
 
-
background-repeat: no-repeat;
 
-
background-position: center top;
 
-
margin: 0px;
 
-
padding: 0px;
 
-
height: 600px;
 
-
width: 970px;
 
-
}
 
-
-->
 
-
</style>
 
-
</head>
 
-
<body>
 
-
<div class="header">
 
-
<div id="ei_menu" class="ei_menu">
 
-
<ul>
 
-
<li>
 
-
<a href="#" class="pos1">
 
-
<span class="ei_preview"></span>
 
-
<span class="ei_image"></span>
 
-
</a>
 
-
<div class="ei_descr">
 
-
<h2>Home</h2>
 
-
 
-
<p>This is our homepage, contain the introductions of every part</p>
 
-
</div>
 
-
</li>
 
-
<li>
 
-
<a href="#" class="pos2">
 
-
<span class="ei_preview"></span>
 
-
<span class="ei_image"></span>
 
-
</a>
 
-
<div class="ei_descr">
 
-
 
-
</div>
 
-
 
-
</li>
 
-
<li>
 
-
<a href="#" class="pos3">
 
-
<span class="ei_preview"></span>
 
-
<span class="ei_image"></span>
 
-
</a>
 
-
<div class="ei_descr">
 
-
<h2>Team</h2>
 
-
 
-
<p>Monkey D. Luffy (モンキー・D・ルフィ, Monkī Dī Rufi), nicknamed "Straw Hat" Luffy (麦わらのルフィ, Mugiwara no Rufi), is the 19 year-old captain of The Straw Hat Pirates and the main protagonist of the franchise.</p>
 
-
</div>
 
-
</li>
 
-
<li>
 
-
<a href="#" class="pos4">
 
-
<span class="ei_preview"></span>
 
-
<span class="ei_image"></span>
 
-
</a>
 
-
<div class="ei_descr">
 
-
<h2>Notebook</h2>
 
-
 
-
<p>Nami (ナミ), nicknamed "Cat Burglar" Nami (泥棒猫のナミ, Dorobō Neko no Nami, renamed Nami the "Navigator" in the 4Kids anime), is the crew's 20 year oldch.27 navigator and thief.FROM www.lanrentuku.com</p>
 
-
 
-
</div>
 
-
</li>
 
-
<li>
 
-
<a href="#" class="pos5">
 
-
<span class="ei_preview"></span>
 
-
<span class="ei_image"></span>
 
-
</a>
 
-
<div class="ei_descr">
 
-
<h2>Human Practice</h2>
 
-
 
-
<p>Sanji (サンジ), nicknamed "Black Leg" Sanji (黒脚のサンジ, Kuro Ashi no Sanji)ch.435, is the crew's 21-year-oldch.55 chef.</p>
 
-
</div>
 
-
</li>
 
-
</ul>
 
-
  </div>
 
-
</div>
 
 +
<div id="banner">   
 +
    <div id="banner_bg"></div>  <!--标题背景-->
 +
    <div id="banner_info"></div> <!--标题-->
 +
    <ul>
 +
        <li class="on">1</li>
 +
        <li>2</li>
 +
        <li>3</li>
 +
        <li>4</li>
 +
  <li>5</li>
 +
  <li>6</li>
 +
    </ul>
 +
  <div id="banner_list">
 +
        <a href="#" target="_blank"><img src="https://static.igem.org/mediawiki/2011/e/e2/Zju-h1.jpg" title="" alt="" /></a>
 +
        <a href="#" target="_blank"><img src="https://static.igem.org/mediawiki/2011/0/00/Zju-h2.jpg" title="" alt="" /></a>
 +
        <a href="#" target="_blank"><img src="https://static.igem.org/mediawiki/2011/5/54/Zju-h3.jpg" title="" alt="" /></a>
 +
        <a href="#" target="_blank"><img src="https://static.igem.org/mediawiki/2011/7/7f/Zju-h4.jpg" title="" alt="" /></a>
 +
  <a href="#" target="_blank"><img src="https://static.igem.org/mediawiki/2011/8/86/Zju-h5.jpg" title="" alt="" /></a>
 +
  <a href="#" target="_blank"><img src="https://static.igem.org/mediawiki/2011/7/76/Zju-h6.jpg" title="" alt="" /></a>
 +
    </div>
</div>
</div>
</body>
</body>
 +
</html>
</html>

Latest revision as of 03:34, 5 October 2011

Retrieved from "http://2011.igem.org/Team:ZJU-China/Notebook/week1"