Difference between revisions of "Team:XMU-China/Description"

Line 1: Line 1:
−
{{IGEM_TopBar}}
+
<html lang="en" class="no-js">
−
{{XMU-China}}
+
−
<html>
+
 
<head>
 
<head>
−
    <meta charset="UTF-8">
+
  <meta charset="UTF-8">
−
    <meta name="viewport" content="width=device-width,initial-scale=1">
+
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
−
    <title>Example</title>
+
<meta name="viewport" content="width=500" />
−
    <link rel="stylesheet" href="bootstrap.min.css">
+
<meta name="keywords" content="ScrollMagic, example, scrolling, attaching, scrollbar, tween, tweenmax" />
−
    <link rel="stylesheet" href="description.css">
+
  <meta name="author" content="Jan Paepke (www.janpaepke.de)" />
−
<link rel="stylesheet" href="mobile.css">
+
  <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
−
<script src="jquery-3.5.1.min.js"></script>
+
  <style type='text/css'>
−
<script src="bootstrap.min.js"></script>
+
#sideMenu, #top_title, .patrollink, #firstHeading, #home_logo, #sideMenu { display:none; }
−
 
+
#content { padding:0px; width:100%; margin-top:-7px; margin-left:0px; border:none;}
 +
body, html {background-color:white; width: 100%; height: 100%;}
 +
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
 +
#bodyContent a[href ^="https://"], .link-https { padding-right:0px;}
 +
#home_logo, #sideMenu { display:none; }
 +
</style>
 +
  <link rel="stylesheet" href="https://2020.igem.org/Team:XMU-China/css/initialize/css?action=raw&ctype=text/css">
 +
  <link rel="stylesheet" href="https://2020.igem.org/Team:XMU-China/css/part1listdescription?action=raw&ctype=text/css">
 +
<link rel="stylesheet" href="https://2020.igem.org/Team:XMU-China/css/universial?action=raw&ctype=text/css">
 
</head>
 
</head>
−
<body id="top">
+
<body >
−
<div class="topimg header">
+
  <div class="containor">
−
    <img class="toptoptop" src="img-description.png">
+
     <div class="part1">
−
</div>
+
      <div class="wrap">
−
<div id="all_p">
+
        <div class="team">
−
     <div class="container  content">
+
          <img src="https://static.igem.org/mediawiki/2020/c/cb/T--XMU-China--logo.png" alt="">
−
<div class="cont cont1">
+
        </div>
−
<div class="bigsize" >
+
        <div class="aaa">
−
    <h1 class="allheadline">Inspiration</h1>
+
          <ul class="level">
−
</div>
+
            <li>
−
<p>As a famous saying goes, "Quantitative changes lead to qualitative changes". This year team XMU-China did experience a period of pain. During the brainstorming stage, our team was divided into 5 groups to explore different project directions for the 2019 iGEM competition. We initially constructed 5 alternative projects in 8 weeks:</p>
+
              <div class="ball"></div><a href="" class="a1">Home</a>
−
<p>1. Reuse of Waste Edible Oil: Efficiently Producing Surfactants in <i>Bacillus Subtilis</i></p>
+
            </li>
−
<p>2. Plasmid Delivery System Suppresses the Release of Inflammatory Cytokines in Inflammatory Bowel Disease (IBD) to Relieve Symptoms</p>
+
            <li>
−
<p>3. Using Alkaloids to Kill Fouling Organism Barnacles</p>
+
                <div class="ball"></div>
−
<p>4. Repairing Wooden Buildings with <i>E. coli</i> Secreted Cellulose</p>
+
                <a href="" class="a1">Project</a>
−
<p>5. Using Bacteria to Simulate Social Relationships </p>
+
                <ul class="two">
−
<p>With these preliminary projects, we joined this year's Southern China Regional Meeting, and this meeting did help us determine our project's direction. During the brainstorming stage of our team, there was an idea that was promoting at that time: Using Alkaloids to Kill Fouling Organism Barnacles as mentioned above. This was surprisingly similar to the design introduced by Greatbay_SCIE in the meeting presentation. We had more in-depth communication with Greatbay_SCIE team for genetic circuit. As we hope to construct innovative project, this stimulated us to explore more new fields through brainstorming. The meeting was a great impetus for us to turn our attention to the study of sociology using synthetic biology.</p>
+
                    <a href="https://2020.igem.org/Team:XMU-China/Description"><li>Description</li></a>
−
<p>Then we did a pointed literature search and summarized some ideas that could support this project. </p>
+
                    <li>Design</li>
−
<p>Using microbes for sociology often gains interesting results. Japanese scientist Nakagaki (<i>1</i>) used slime molds to crack a maze successfully in 2004. In 2010, Tero (<i>2</i>) just spent 26 hours by using slime molds and sweet oat granules simulating the road map of Japanese Shinkansen which actually spent several decades to build. People wondered why slime molds without nervous systems can solve such complicated network problem in such a short time, but no wan can give a convincing answer so far. Shapiro (<i>3</i>) pointed out in 2007 that bacteria have cognitive, computational and evolutionary abilities. Meanwhile, they can utilize complex intercellular communication mechanisms to control the basic cellular biology functions of "advanced" plants and animals, which means that it is possible to use bacteria to simulate some basic social forms or interactions.</p>
+
                    <li>Result</li>
−
<p>Bourke, an evolutionary biologist, gives an explanation for the biological evolution to social evolution. He believes that: <i>genes form genomes, prokaryotic cells and protobacteria form eukaryote cells, eukaryote cells form multicelled organisms and multicelled organisms form eusocial societies or join with other organisms to form mutualisms</i>. (<i>4</i>)</p>
+
                    <li>Demonstrate</li>
−
<p>In fact, observing the evolution of a stable species to another stable species can better help us understand the social structure. However, due to the consideration of time cost, it seems to be a more viable way by using synthetic biological method to create engineering bacteria with different functions that we need directly.</p>
+
                    <li>parts</li>
−
<p>So, we abstracted social relationships into Mutual Benefit, Altruism, Spite and Selfishness. Our team prepared to build genetic circuits around these 4 relationships.</p>
+
                </ul>
−
<p>But it was the origin version of our project, we lately improved our project for more than 4 times and finally formed the final version Re_Gone with the wind. You can see more details about why and how we updated the project version at the page of  <a class="click_here" href="https://2019.igem.org/Team:XMU-China/Human_Practices">Integrated Human Practices</a>.</p>
+
            </li>
−
     
+
            <li>
−
</div>
+
                <div class="ball"></div>
−
<div class="cont cont2">
+
                <a href="" class="a1">Model</a>
−
<h1 class="allheadline">TestSomethingForPages</h1>
+
            </li>
−
<img src="testimg.jpg" class="img-thumbnail" width="400em" height="300em" >
+
            <li>
−
<p>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
+
                <div class="ball"></div>
−
<p>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
+
                <a href="" class="a1">Human Practices</a>
−
<p>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
+
                <ul class="two">
−
<p>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
+
                    <li>Overview</li>
−
<p>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
+
                    <li>silver</li>
−
<p>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
+
                    <li>Gold</li>
−
<p>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
+
                    <li>Public Engagement</li>
−
<p>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
+
                    <li>Collaborations</li>
−
<p>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
+
                </ul>
−
<p>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
+
            </li>
−
<p>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
+
            <li>
−
<p>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
+
                <div class="ball"></div>
−
<p class="video" style="text-align: center;">
+
                <a href="" class="a1">Other WorK</a>
−
<video src="testvideo.mov" controls=""></video>
+
                <ul class="two">
−
</p>
+
                    <li>Contribution</li>
−
<table class="table table-striped table-bordered table-hover">
+
                    <li>Improve</li>
−
<thead>
+
                    <li>Experiments</li>
−
<tr>
+
                    <li>Notebook</li>
−
<th>表格标题</th>
+
                    <li>Safrty</li>
−
<th>表格标题</th>
+
                </ul>
−
<th>表格标题</th>
+
            </li>
−
<th>表格标题</th>
+
            <li>
−
<th>表格标题</th>
+
              <div class="ball"></div>
−
<th>表格标题</th>
+
              <a href="" class="a1">Team</a>
−
</tr>
+
              <ul class="two">
−
</thead>
+
                  <li>Members</li>
−
<thead>
+
                  <li>Attributions</li>
−
<tr>
+
                  <li>Judging</li>
−
<th>表格标题</th>
+
              </ul>
−
<th>表格标题</th>
+
            </li>
−
<th>表格标题</th>
+
          </ul>
−
<th>表格标题</th>
+
        </div>
−
<th>表格标题</th>
+
        <!-- 导航菜单栏 -->
−
<th>表格标题</th>
+
        <div class="aaa-list" >
−
</tr>
+
          <img src="https://static.igem.org/mediawiki/2020/5/59/T--XMU-China--list.png" alt="" class="list-img">
−
</thead>
+
          <div class="menu">
−
<thead>
+
            <ul class="menu-list">
−
<tr>
+
              <li><a href="#">HOME </a>
−
<th>表格标题</th>
+
              </li>
−
<th>表格标题</th>
+
              <li><a href="#">Project &gt;</a>
−
<th>表格标题</th>
+
                <ul class="list-one">
−
<th>表格标题</th>
+
                  <li>Description</li>
−
<th>表格标题</th>
+
                  <li>Design</li>
−
<th>表格标题</th>
+
                  <li>Result</li>
−
</tr>
+
                  <li>Demonstrate</li>
−
</thead>
+
                  <li>parts</li>
−
<thead>
+
                </ul>
−
<tr>
+
              </li>
−
<th>表格标题</th>
+
              <li><a href="#">Model</a>
−
<th>表格标题</th>
+
              </li>
−
<th>表格标题</th>
+
              <li><a href="#">Human Practices &gt;</a>
−
<th>表格标题</th>
+
                <ul class="list-two">
−
<th>表格标题</th>
+
                  <li>Overview</li>
−
<th>表格标题</th>
+
                  <li>silver</li>
−
</tr>
+
                  <li>Gold</li>
−
</thead>
+
                  <li>Public Engagement</li>
−
<thead>
+
                  <li>Collaborations</li>
−
<tr>
+
                </ul>
−
<th>表格标题</th>
+
              </li>
−
<th>表格标题</th>
+
              <li><a href="#">Other WorK &gt;</a>
−
<th>表格标题</th>
+
                <ul class="list-third">
−
<th>表格标题</th>
+
                  <li>Contribution</li>
−
<th>表格标题</th>
+
                  <li>Improve</li>
−
<th>表格标题</th>
+
                  <li>Experiments</li>
−
</tr>
+
                  <li>Notebook</li>
−
</thead>
+
                  <li>Safrty</li>
−
<thead>
+
                </ul>
−
<tr>
+
              </li>
−
<th>表格标题</th>
+
              <li><a href="#">Team &gt;</a>
−
<th>表格标题</th>
+
                <ul class="list-four">
−
<th>表格标题</th>
+
                  <li>Members</li>
−
<th>表格标题</th>
+
                  <li>Attributions</li>
−
<th>表格标题</th>
+
                  <li>Judging</li>
−
<th>表格标题</th>
+
                </ul>
−
</tr>
+
              </li>
−
</thead>
+
            </ul>
−
<thead>
+
        </div>
−
<tr>
+
        </div>
−
<th>表格标题</th>
+
      </div>
−
<th>表格标题</th>
+
−
<th>表格标题</th>
+
−
<th>表格标题</th>
+
−
<th>表格标题</th>
+
−
<th>表格标题</th>
+
−
</tr>
+
−
</thead>
+
−
</table>
+
−
<div class="media">
+
−
<a class="media-left" href="#">
+
−
<img src="1.png" width="100em" height="100em">
+
−
</a>
+
−
<div class="media-body">
+
−
<h3 class="media-heading">XIAMEN UNIVERSITY</h3>
+
−
<p>XIAMEN UNIVERSITY XIAMEN UNIVERSITY XIAMEN UNIVERSITY XIAMEN UNIVERSITY XIAMEN UNIVERSITY XIAMEN UNIVERSITY</p>
+
−
<p>XIAMEN UNIVERSITY XIAMEN UNIVERSITY XIAMEN UNIVERSITY XIAMEN UNIVERSITY XIAMEN UNIVERSITY XIAMEN UNIVERSITY</p>
+
−
</div>
+
−
</div>
+
−
<div class="media">
+
−
<a class="media-left" href="#">
+
−
<img src="2.png" width="100em"  height="100em">
+
−
</a>
+
−
<div class="media-body">
+
−
<h3 class="media-heading">XIAMEN UNIVERSITY</h3>
+
−
<p>XIAMEN UNIVERSITY XIAMEN UNIVERSITY XIAMEN UNIVERSITY XIAMEN UNIVERSITY XIAMEN UNIVERSITY XIAMEN UNIVERSITY</p>
+
−
<p>XIAMEN UNIVERSITY XIAMEN UNIVERSITY XIAMEN UNIVERSITY XIAMEN UNIVERSITY XIAMEN UNIVERSITY XIAMEN UNIVERSITY</p>
+
−
</div>
+
−
</div>
+
−
<div class="media">
+
−
<a class="media-left" href="#">
+
−
<img src="3.png" width="100em"  height="100em">
+
−
</a>
+
−
<div class="media-body">
+
−
<h3 class="media-heading">XIAMEN UNIVERSITY</h3>
+
−
<p>XIAMEN UNIVERSITY XIAMEN UNIVERSITY XIAMEN UNIVERSITY XIAMEN UNIVERSITY XIAMEN UNIVERSITY XIAMEN UNIVERSITY</p>
+
−
<p>XIAMEN UNIVERSITY XIAMEN UNIVERSITY XIAMEN UNIVERSITY XIAMEN UNIVERSITY XIAMEN UNIVERSITY XIAMEN UNIVERSITY</p>
+
−
</div>
+
−
</div>
+
−
 
+
−
<div class="row">
+
−
<div class="col-md-offset-3 col-md-6">
+
−
<div id="accordion">
+
−
<div class="panel">
+
−
<div class="panel-heading" role="tab" id="heading60">
+
−
<h4 class="panel-title">
+
−
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse60" aria-expanded="false" aria-controls="collapse60">
+
−
Literature Analysis
+
−
</a></h4>
+
−
</div>
+
−
<div id="collapse60" class="panel-collapse collapse" role="tabpanel">
+
−
<div class="panel-body">
+
−
<p>Using microbes for group interactions often gains interesting results. Japanese scientist Nakagaki (<i>1</i>) used slime molds to crack a maze successfully in 2004. In 2010, Tero (<i>2</i>) just spent 26 hours by using slime molds and sweet oat granules simulating the road map of Japanese Shinkansen which actually spent several decades to build. People wondered why slime molds without nervous systems can solve such complicated network problem in such a short time, but no wan can give a convincing answer so far. Shapiro (<i>3</i>) pointed out in 2007 that bacteria have cognitive, computational and evolutionary abilities. Meanwhile, they can utilize complex intercellular communication mechanisms to control the basic cellular biology functions of “advanced” plants and animals, which means that it is possible to use bacteria to simulate some basic social forms or interactions.</p>
+
−
<P>Bourke, an evolutionary biologist, gives an explanation for the biological evolution to social evolution. He believes that: <i>genes form genomes, prokaryotic cells and protobacteria form eukaryote cells, eukaryote cells form multicelled organisms and multicelled organisms form eusocial societies or join with other organisms to form mutualisms</i> (<i>4</i>).</P>
+
−
<p>In fact, observing the evolution of a stable species to another stable species can better help us understand the social structure. However, due to the consideration of time cost, it seems to be a more viable way by using synthetic biological method to create engineering bacteria with different functions that we need directly.</p>
+
−
<p>So, we abstracted group interactions into Mutual Benefit, Altruism, Spite and Selfishness. Our team prepared to build genetic circuits around these 4 relationships.</p>
+
−
</div>
+
−
</div>
+
−
</div>
+
−
</div>
+
−
</div>
+
−
</div>
+
−
<div class="forHPGOLD">
+
−
<h2 class="specialHeadline">Gold</h2>
+
−
<h3 class="specialHeadline2">Integrated Human Practices</h3>
+
−
<p>This year’s Integrated Human Practices can be divided into four parts. Firstly, we have widely read sociological literatures on our project, which established the foundation for initially constructing our project. Additionally, we have communicated with professors from Molecular Anthropology, Bioenergy Engineering, Sociology and Public Affairs Management respectively, whose feedbacks helped us to determine the subject of our project and the major direction of the experiment design. What’s more, in terms of the details of the subject, we have made an elaborate design for the questionnaire using social-science research methods, and we have conducted extensive investigations in iGEM Community and public. We attended various exchange meetings in China, and communicated with many teams. </p>
+
−
<h3 class="specialHeadline2">Integrated Human Practices</h3>
+
−
<p>This year’s Integrated Human Practices can be divided into four parts. Firstly, we have widely read sociological literatures on our project, which established the foundation for initially constructing our project. Additionally, we have communicated with professors from Molecular Anthropology, Bioenergy Engineering, Sociology and Public Affairs Management respectively, whose feedbacks helped us to determine the subject of our project and the major direction of the experiment design. What’s more, in terms of the details of the subject, we have made an elaborate design for the questionnaire using social-science research methods, and we have conducted extensive investigations in iGEM Community and public. We attended various exchange meetings in China, and communicated with many teams. </p>
+
−
<h2 class="specialHeadline">Silver</h2>
+
−
<p>This year’s Integrated Human Practices can be divided into four parts. Firstly, we have widely read sociological literatures on our project, which established the foundation for initially constructing our project. Additionally, we have communicated with professors from Molecular Anthropology, Bioenergy Engineering, Sociology and Public Affairs Management respectively, whose feedbacks helped us to determine the subject of our project and the major direction of the experiment design. What’s more, in terms of the details of the subject, we have made an elaborate design for the questionnaire using social-science research methods, and we have conducted extensive investigations in iGEM Community and public. We attended various exchange meetings in China, and communicated with many teams. </p>
+
−
<h2 class="specialHeadline">Bronze</h2>
+
−
<p>This year’s Integrated Human Practices can be divided into four parts. Firstly, we have widely read sociological literatures on our project, which established the foundation for initially constructing our project. Additionally, we have communicated with professors from Molecular Anthropology, Bioenergy Engineering, Sociology and Public Affairs Management respectively, whose feedbacks helped us to determine the subject of our project and the major direction of the experiment design. What’s more, in terms of the details of the subject, we have made an elaborate design for the questionnaire using social-science research methods, and we have conducted extensive investigations in iGEM Community and public. We attended various exchange meetings in China, and communicated with many teams. </p>
+
−
 
+
−
</div>
+
−
</div>
+
−
<div class="cont cont3">
+
−
<h1 class="allheadline">Reference</h1>
+
−
<p>1. T. Nakagaki, et al., Yamada, Maze-solving by an amoeboid organism. Nature 407, 470 (2000).</p>
+
−
<p>2. A. Tero, et al., Rules for Biologically Inspired Adaptive Network Design. Science 327, 439-442 (2010).</p>
+
−
<p>3. J. A. Shapiro, Bacteria are small but not stupid: cognition, natural genetic engineering and socio-bacteriology. Stud Hist Phil Biol & Biomed Sci 38, 807-819 (2007).</p>
+
−
<p>4. C. E. Mouden, Life: social to its core Principles of Social Evolution. Evolution and Human Behavior 33, 79-80 (2012).</p>
+
−
<h1 class="allheadline">Reference</h1>
+
−
<p>1. T. Nakagaki, et al., Yamada, Maze-solving by an amoeboid organism. Nature 407, 470 (2000).</p>
+
−
<p>2. A. Tero, et al., Rules for Biologically Inspired Adaptive Network Design. Science 327, 439-442 (2010).</p>
+
−
<p>3. J. A. Shapiro, Bacteria are small but not stupid: cognition, natural genetic engineering and socio-bacteriology. Stud Hist Phil Biol & Biomed Sci 38, 807-819 (2007).</p>
+
−
<p>4. C. E. Mouden, Life: social to its core Principles of Social Evolution. Evolution and Human Behavior 33, 79-80 (2012).</p>
+
−
<img src="testtest.jpg" width="500vw" >
+
−
</div>
+
−
</div>
+
 
     </div>
 
     </div>
 +
  </div>
 
<div class="footer">
 
<div class="footer">
−
<div class="footer_bottom">
+
<div class="footer_bottom">
−
<p>Xiamen University, Fujian, China</p>
+
<p>Xiamen University, Fujian, China</p>
−
<p>No.422, Siming South Road, Fujian, P.R.China 361005</p>
+
<p>No.422, Siming South Road, Fujian, P.R.China 361005</p>
−
</div>
+
</div>
 
</div>
 
</div>
−
<div class="sideCon pop1" id="popup" >
 
−
<ul class="clearfix sideUl r_nav "  >
 
−
<li class="lis"><a class="cur" href="javascript:;"  >Inspiration</a></li>
 
−
<li class="lis"><a href="javascript:;">TEST</a></li>
 
−
<li class="lis"><a href="javascript:;">Reference</a></li>
 
−
 
−
</ul>
 
−
<div class="returnTopCon"><a  class="toTop" href="javascript:;">
 
−
<img class="returnTopImg" src="returnTop.png" >
 
−
</a></div>
 
−
</div>
 
−
<script src="jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script>
 
−
<script type="text/javascript">
 
−
$(document).ready(function() {
 
−
var nav = (function(navObj) {
 
−
navObj.init = function() {
 
−
this.n = 0;
 
−
this.offsetTop = [];
 
−
this.scrolltype = true;
 
−
this.review = function() {
 
−
$('#popup .lis a').eq(this.n).addClass('cur').parent().siblings().children().removeClass('cur');
 
−
};
 
−
for (var i = 0; i < $('.content .cont').length; i++) {
 
−
this.offsetTop.push($('.content .cont').eq(i).offset().top);
 
−
};
 
−
navObj.bindE();
 
−
};
 
−
navObj.bindE = function() { //滚动条滚动改变导航元素效果
 
−
var self = this; //这里的this等同于上面的this
 
−
$(window).bind('load scroll', function() {
 
−
var stval = $(this).scrollTop();
 
−
if (stval > 420) { //判断滚动条滚动距离大于或小于header高度时，让导航效果对应在第一个上
 
−
if (stval < self.offsetTop[0]) { 
 
−
self.n = 0;
 
−
} else {
 
−
for (var j = 0; j < self.offsetTop.length; j++) {
 
−
if (stval > (self.offsetTop[j] + 300) && stval < self.offsetTop[j + 1]) {
 
−
self.n = j + 1;
 
−
break;
 
−
} //这里的300是常量
 
−
};
 
−
};
 
−
if (self.scrolltype === true) {
 
−
self.review();
 
−
}
 
−
$('#popup').removeClass('pop1').addClass('pop');
 
−
} else {
 
−
$('#popup').removeClass('pop').addClass('pop1');
 
−
$('#popup li a').parent('li:first-child').children().addClass('cur').parent().siblings().children().removeClass(
 
−
'cur');
 
−
};
 
−
});
 
−
$('.toTop').click(function() { //    点击返回首页Top按钮实现页面不刷新返回顶部
 
−
$('html, body').animate({
 
−
scrollTop: 0 + 'px'
 
−
}, 500);
 
−
$('#popup li a').parent('li:first-child').children().addClass('cur').parent().siblings().children().removeClass(
 
−
'cur');
 
−
});
 
−
$('#popup .lis').delegate('a', 'click', function(e) { //  点击导航定位页面内容
 
−
self.n = $(this).index('#popup .lis a');
 
−
self.scrolltype = false;
 
−
self.review();
 
−
var t = self.offsetTop[self.n];
 
−
$('html,body').animate({
 
−
scrollTop: t
 
−
}, 500, function() { //  滚动条滚动 页面不同内容的offsetTop值实现按钮对应效果
 
−
self.scrolltype = true;
 
−
$(self.n).addClass('cur').parent().siblings().children().removeClass('cur');
 
−
});
 
−
});
 
−
};
 
−
return navObj;
 
−
 
−
})(window.navObj || {});
 
−
nav.init();
 
−
});
 
−
</script>
 
 
</body>
 
</body>
−
 
+
</html
−
</html>
+

Revision as of 14:38, 12 October 2020

Xiamen University, Fujian, China

No.422, Siming South Road, Fujian, P.R.China 361005