Team:UT-Tokyo/Template/Style

From 2013.igem.org

(Difference between revisions)
Line 292: Line 292:
</style>
</style>
-
 
+
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
 +
    <script>
 +
    $(function() {
 +
        var rotate = function(logo, angle) {
 +
            logo.css({
 +
            "-webkit-transform" : "rotate("+angle+"deg)",
 +
            "-moz-transform" : "rotate("+angle+"deg)",
 +
            "transform" : "rotate("+angle+"deg)"
 +
            });
 +
        }
 +
        $(window).scroll(function(){
 +
            rotate($(".logo"), $(window).scrollTop()*0.2);
 +
        })
 +
    });
 +
    $(function() {
 +
        var d=300;
 +
        $('#navigation li').each(function(){
 +
            var $this = $(this);
 +
            var r=Math.floor(Math.random()*31)-15;
 +
            $this.css({
 +
                '-moz-transform':'rotate('+r+'deg)',
 +
                '-webkit-transform':'rotate('+r+'deg)',
 +
                'transform':'rotate('+r+'deg)'
 +
                });
 +
            $this.stop().animate({
 +
                'marginLeft':'-70px'
 +
                },d+=150);
 +
        });
 +
        $('#navigation > li').hover(
 +
            function () {
 +
                var $this = $(this);
 +
                $($this).stop().animate({
 +
                    'marginLeft':'120px'
 +
                },200);
 +
            },
 +
            function () {
 +
                var $this = $(this);
 +
                $($this).stop().animate({
 +
                    'marginLeft':'-70px'
 +
                },200);
 +
        });
 +
    });
 +
    $(function(){
 +
        $('a[href^=#]').click(function(){
 +
            var speed = 500;
 +
            var href= $(this).attr("href");
 +
            var target = $(href == "#" || href == "" ? 'html' : href);
 +
            var position = target.offset().top;
 +
            $("html, body").animate({scrollTop:position}, speed, "swing");
 +
            return false;
 +
        });
 +
    });
 +
    $(function(){
 +
        $("ol ol.menu").hide(); 
 +
        $("span.mhead").click(function(){ 
 +
            $(this).next('ol').slideToggle(); 
 +
        }); 
 +
    }); 
 +
    </script>
<p>
<p>
</html>
</html>

Revision as of 14:57, 10 September 2013