Difference between revisions of "Team:FAFU-CHINA/Attributions"

Line 1: Line 1:
 
{{:Template:FAFU_CHINA/index2/head}}
 
{{:Template:FAFU_CHINA/index2/head}}
 
<html xmlns="http://www.w3.org/1999/xhtml">
 
<html xmlns="http://www.w3.org/1999/xhtml">
 +
<html lang="zh">
 
<head>
 
<head>
−
<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>jQuery右侧弹出侧边导航栏代码 </title>
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
−
 
+
<title>谷歌Material Design侧边栏特效 - A5源码</title>
−
<link type="text/css" href="https://2015.igem.org/Template:FAFU_CHINA/head2/css/index?action=raw&amp;ctype=text/css" rel="stylesheet">
+
<link rel="stylesheet" type="text/css" href="https://2015.igem.org/Template:FAFU_CHINA/guge/css/normalize?action=raw&amp;ctype=text/css" />
−
 
+
<link rel="stylesheet" type="text/css" href="https://2015.igem.org/Template:FAFU_CHINA/guge/css/default?action=raw&amp;ctype=text/css" />
−
<script type="text/javascript" src="https://2015.igem.org/Template:FAFU_CHINA/head2/js/jquery1.42.min?action=raw&amp;ctype=text/javascript"></script>
+
<link href='http://fonts.useso.com/css?family=Lato:300,400' rel='stylesheet' type='text/css'>
−
<script type="text/javascript">
+
<link rel="stylesheet" type="text/css" href="https://2015.igem.org/Template:FAFU_CHINA/guge/css/styles.css?action=raw&amp;ctype=text/css" />
−
$(document).ready(function(){
+
<!--[if IE]>
−
    function anim(duration){
+
<script src="http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js"></script>
−
        $('#mint').animate(
+
<![endif]-->
−
            {height: 'toggle'},
+
−
            {duration: duration}
+
−
        );
+
−
    }
+
−
    $('#closebtn').click(function() {
+
−
        $('#mintbar').slideUp();
+
−
        anim(600);
+
−
    });
+
−
 
+
−
    $('#mint').click(function() {
+
−
        anim(600);
+
−
        $('#mintbar').slideDown('slow');
+
−
    });
+
−
+
−
});
+
−
</script>
+
−
 
+
 
</head>
 
</head>
−
 
+
<body>
−
<body>  
+
<div class="com">
−
 
+
<div class="com__content">
−
<div class="box-bj"><img src="https://static.igem.org/mediawiki/2015/b/b9/Fafu_wd011.jpg" /></div>
+
<section class="com__section com__section--text">
−
 
+
<p class="animate slideInLeft delay-3">适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p>
−
<div id="mintbar"><a id="closebtn" href="#"><img src="https://static.igem.org/mediawiki/2015/0/0e/Fafu_wd02.png" /></a></div>
+
<p>来源：<a href="http://down.admin5.com" target="_blank">A5源码</a></p>
−
 
+
</section>
−
<div id="mint" style="display:none;position:absolute;top:0;right:0px;">
+
<section class="com__section com__section--text com__section--text-img">
−
<div class="box-nav-bj"><img style="right:0px; top:0px;" src="https://static.igem.org/mediawiki/2015/0/07/Fafu_wd06.png" /></div>
+
<div class="com__section-half">
−
<div class="box-nav">
+
<h1 class="animate slideInLeft">Communication Design</h1>
−
<li><a href="#">Attribu</a></li>
+
<p class="animate slideInLeft delay-2">Communication design is a mixed discipline between design and information-development which is concerned with how media intermission such as printed, crafted, electronic media or presentations communicate with people.</p>
−
<li><a href="#">Backg</a></li>
+
</div>
−
<li><a href="#">Collan</a></li>
+
<div class="com__section-half">
−
<li><a href="#">Humane</a></li>
+
<img class="animate slideInRight delay-3" src="world.svg" alt="" />
−
<li><a href="#">Labs</a></li>
+
</div>
−
<li><a href="#">Meeting</a></li>
+
</section>
−
</div>
+
<section class="com__section com__section--text centered">
−
<img src="https://static.igem.org/mediawiki/2015/8/87/Fafu_wd07.png" alt="丝带"/>
+
<h1 class="animate scaleIn">A5源码</h1>
−
<div class="box-phone">
+
<img class="animate scaleIn delay-3" src="world.svg" alt="" />
−
<p>服务QQ：</p>
+
</section>
−
<p>4309276445</p>
+
<section class="com__section com__section--text">
−
</div>
+
<h1 class="animate slideInLeft ">Communication Design</h1>
 +
<p class="animate slideInLeft delay-3">Communication design is a mixed discipline between design and information-development which is concerned with how media intermission such as printed, crafted, electronic media or presentations communicate with people.</p>
 +
</section>
 +
<section class="com__section com__section--text com__section--text-img">
 +
<div class="com__section-half">
 +
<h1 class="animate slideInLeft">Communication Design</h1>
 +
<p class="animate slideInLeft delay-2">Communication design is a mixed discipline between design and information-development which is concerned with how media intermission such as printed, crafted, electronic media or presentations communicate with people.</p>
 +
</div>
 +
<div class="com__section-half">
 +
<img class="animate slideInRight delay-3" src="world.svg" alt="" />
 +
</div>
 +
</section>
 +
<section class="com__section com__section--text centered">
 +
<h1 class="animate scaleIn">Communication Design</h1>
 +
<img class="animate scaleIn delay-3" src="world.svg" alt="" />
 +
</section>
 +
<section class="com__section com__section--text">
 +
<h1 class="animate slideInLeft ">Communication Design</h1>
 +
<p class="animate slideInLeft delay-3">Communication design is a mixed discipline between design and information-development which is concerned with how media intermission such as printed, crafted, electronic media or presentations communicate with people.</p>
 +
</section>
 +
</div>
 +
<nav class="com__nav">
 +
<ul class="com__nav-list">
 +
<li class="com__nav-item">
 +
<a href="" class="com__nav-link">
 +
<span class="blue-line animate scaleInLeft delay-2"></span>
 +
<span class="white-line animate scaleInLeft delay-4"></span>
 +
<span class="white-line animate scaleInLeft delay-5"></span>
 +
</a>
 +
</li>
 +
<li class="com__nav-item">
 +
<a href="" class="com__nav-link flex-row">
 +
<div class="com__section-half">
 +
<span class="blue-line animate scaleInLeft delay-3"></span>
 +
<span class="white-line animate scaleInLeft delay-4"></span>
 +
</div>
 +
<div class="com__section-half">
 +
<span class="white-circle animate slideInRight delay-5"></span>
 +
</div>
 +
</a>
 +
</li>
 +
<li class="com__nav-item">
 +
<a href="" class="com__nav-link centered">
 +
<span class="blue-line animate scaleIn delay-3"></span>
 +
<span class="white-circle animate scaleIn delay-5"></span>
 +
</a>
 +
</li>
 +
<li class="com__nav-item">
 +
<a href="" class="com__nav-link">
 +
<span class="blue-line animate scaleInLeft delay-2"></span>
 +
<span class="white-line animate scaleInLeft delay-4"></span>
 +
<span class="white-line animate scaleInLeft delay-5"></span>
 +
</a>
 +
</li>
 +
<li class="com__nav-item">
 +
<a href="" class="com__nav-link flex-row">
 +
<div class="com__section-half">
 +
<span class="blue-line animate scaleInLeft delay-3"></span>
 +
<span class="white-line animate scaleInLeft delay-4"></span>
 +
</div>
 +
<div class="com__section-half">
 +
<span class="white-circle animate slideInRight delay-5"></span>
 +
</div>
 +
</a>
 +
</li>
 +
<li class="com__nav-item">
 +
<a href="" class="com__nav-link centered">
 +
<span class="blue-line animate scaleIn delay-3"></span>
 +
<span class="white-circle animate scaleIn delay-5"></span>
 +
</a>
 +
</li>
 +
<li class="com__nav-item">
 +
<a href="" class="com__nav-link">
 +
<span class="blue-line animate scaleInLeft delay-2"></span>
 +
<span class="white-line animate scaleInLeft delay-4"></span>
 +
<span class="white-line animate scaleInLeft delay-5"></span>
 +
</a>
 +
</li>
 +
</ul>
 +
</nav>
 
</div>
 
</div>
  
−
<div class="box-dibu">
+
<script src="https://2015.igem.org/Template:FAFU_CHINA/guge/js/jquery-2-1-1-min?action=raw&amp;ctype=text/javascript"></script>
−
   
+
<script>
−
    <div class="box-dibu2">
+
var link = $('.com__nav-link');
−
      <a href="#"><img src="https://static.igem.org/mediawiki/2015/a/af/Fafu_wd04.png" /></a>
+
var linkParent = link.parent('li');
−
      <a href="#"><img src="https://static.igem.org/mediawiki/2015/0/0d/Fafu_wd05.png" /></a>
+
var section = $('.com__section');
−
    </div>
+
var sectionContent = section.find('*');
−
</div>
+
var switchTab = function () {
 +
var p = $(this).parent('li');
 +
var i = p.index();
 +
var s = section.eq(i);
 +
var c = s.find('*');
 +
section.removeClass('active');
 +
sectionContent.removeAttr('style');
 +
s.addClass('active');
 +
c.css({
 +
transform: 'none',
 +
opacity: 1
 +
});
 +
linkParent.removeClass('active');
 +
p.addClass('active');
 +
return false;
 +
};
 +
link.on('click', switchTab);
 +
function activeFirst() {
 +
section.first().addClass('active');
 +
section.first().find('*').css({
 +
transform: 'none',
 +
opacity: 1
 +
});
 +
linkParent.first().addClass('active');
 +
}
 +
activeFirst();
 +
</script>
  
 
</body>
 
</body>
 
</html>
 
</html>

Revision as of 18:40, 15 September 2015

谷歌Material Design侧边栏特效 - A5源码

适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。

来源：A5源码

Communication Design

Communication design is a mixed discipline between design and information-development which is concerned with how media intermission such as printed, crafted, electronic media or presentations communicate with people.

A5源码

Communication Design

Communication design is a mixed discipline between design and information-development which is concerned with how media intermission such as printed, crafted, electronic media or presentations communicate with people.

Communication Design

Communication design is a mixed discipline between design and information-development which is concerned with how media intermission such as printed, crafted, electronic media or presentations communicate with people.

Communication Design

Communication Design

Communication design is a mixed discipline between design and information-development which is concerned with how media intermission such as printed, crafted, electronic media or presentations communicate with people.