Template:Team:USTC-Software/header-n

From 2012.igem.org

(Difference between revisions)
(Created page with "{{Team:USTC-Software/hidden}} <html> <head> <title>home</title> <style> body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquo...")
Line 57: Line 57:
clear: both;
clear: both;
}
}
 +
 +
*{
 +
margin: 0;
 +
padding: 0;
 +
text-decoration: none;
 +
}
 +
 +
a {outline: none;} /*for IE image-border and link dashed line bug*/
 +
a:focus { outline: 0; }
 +
a:active {star:expression_r(this.onFocus=this.blur());}
 +
:focus { outline:0; }
 +
img{display: block;border: none;}
 +
 +
 +
 +
 +
/*the begin of to top css*/
 +
  #topBar {
 +
      position: fixed;
 +
      right: 65px;
 +
      bottom:32px;
 +
      z-index: 20;
 +
    }
 +
  #topBar div {
 +
      background: url('https://static.igem.org/mediawiki/2012/4/4d/Top-black-arrow.png');
 +
      display: block;
 +
      height: 53px;
 +
  width: 53px;
 +
      overflow: hidden;
 +
      text-indent: -9999px;
 +
      cursor: pointer;
 +
      -webkit-transition: all 0.5s ease .03s;
 +
      -moz-transition: all 0.5s ease .03s;
 +
      -o-transition: all 0.5s ease .03s;
 +
      transition: all 0.5s ease .03s;
 +
    }
 +
    #topBar div:hover {
 +
background: url('https://static.igem.org/mediawiki/2012/f/f8/Gray-top-arrow.png');
 +
        -moz-transform: scale(1.05);
 +
        -webkit-transform:  scale(1.05);
 +
        -o-transform:scale(1.05);
 +
        transform:scale(1.05);
 +
    }/**************************the end of to top css*************/    
 +
 +
 +
 +
Line 226: Line 273:
              
              
</div>
</div>
 +
 +
 +
 +
 +
 +
 +
  <!-----the begin of go to top div --->
 +
      <div class="clr"></div>
 +
  <div id="topBar">
 +
      <div id="goToTop" class="goToTop">TOP</div>
 +
  </div><!-----the begin of go to top div---->
 +
   
 +
  <script type="text/javascript">
 +
    (function(){
 +
      var special = jQuery.event.special,
 +
          uid1 = 'D' + (+new Date()),
 +
          uid2 = 'D' + (+new Date() + 1);
 +
     
 +
      special.scrollstart = {
 +
        setup: function(){
 +
          var timer,
 +
              handler = function(evt) {
 +
                var _self = this,
 +
                    _args = arguments;
 +
               
 +
                if(timer) {
 +
                  clearTimeout(timer);
 +
                } else {
 +
                  evt.type = 'scrollstart';
 +
                  jQuery.event.handle.apply(_self,_args);
 +
                }
 +
               
 +
                timer = setTimeout(function(){
 +
                  timer = null;
 +
                },special.scrollstop.latency);
 +
              };
 +
          jQuery(this).bind('scroll',handler).data(uid1,handler);   
 +
        },
 +
        teardown: function(){
 +
          jQuery(this).unbind('scroll',jQuery(this).data(uid1));
 +
        }
 +
      };
 +
     
 +
      special.scrollstop = {
 +
        latency: 300,
 +
        setup: function(){
 +
          var timer,
 +
              handler = function(evt) {
 +
                var _self = this,
 +
                    _args = arguments;
 +
               
 +
                if(timer) {
 +
                  clearTimeout(timer);
 +
                }
 +
               
 +
                timer = setTimeout(function(){
 +
                  timer = null;
 +
                  evt.type = 'scrollstop';
 +
                  jQuery.event.handle.apply(_self,_args);
 +
                },special.scrollstop.latency);
 +
              };
 +
          jQuery(this).bind('scroll',handler).data(uid2,handler);   
 +
        },
 +
        teardown: function() {
 +
          jQuery(this).unbind('scroll',jQuery(this).data(uid2));
 +
        }
 +
      };
 +
    })();
 +
  </script>
 +
  <script type="text/javascript">
 +
    $(function(){
 +
      //the element inside of which we want to scroll
 +
      var btns = $("#topBar div");
 +
      //show the buttons
 +
      btns.fadeIn("slow");
 +
      //whenever we scroll fade out both buttons
 +
      $(window).bind("scrollstart",function(){
 +
        btns.stop().animate({"opacity":"0.2"});
 +
      });
 +
      //...and whenever we stop scrolling fade in both buttons
 +
      $(window).bind("scrollstop",function(){
 +
        btns.stop().animate({"opacity":"1"});
 +
      });
 +
      //clicking the "goToTop" button will make the page scroll to the top of the page
 +
      $("#goToTop").click(function(e){
 +
        $("html,body").animate({scrollTop:"0px"},800);
 +
      });
 +
    });
 +
  </script><!-----the rnd of go to top js---->
 +
 +
 +
 +
 +
          
          
</body>
</body>
</html>
</html>

Revision as of 02:28, 15 August 2012

home

TOP

Retrieved from "http://2012.igem.org/Template:Team:USTC-Software/header-n"