Team:UESTC Life
From 2013.igem.org
(Difference between revisions)
Neptune Yu (Talk | contribs) |
Neptune Yu (Talk | contribs) |
||
Line 1: | Line 1: | ||
<html> | <html> | ||
- | + | <link href="https://2013.igem.org/Team:UESTC_Life/css/jquery.booklet.1.1.0.css?action=raw&ctype=text/css" type="text/css" rel="stylesheet" media="screen" /> | |
- | + | <link rel="stylesheet" href="https://2013.igem.org/Team:UESTC_Life/css/style.css?action=raw&ctype=text/css" type="text/css" media="screen"/> | |
- | + | <link href="https://2013.igem.org/Team:UESTC_Life/css/style_dock.css?action=raw&ctype=text/css" rel="stylesheet" type="text/css" /> | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | <script src="https://2013.igem.org/Team:UESTC_Life/js/biot_jquery-1.4.4.min.js?action=raw&ctype=text/javascript"></script> | |
- | + | <script src="https://2013.igem.org/Team:UESTC_Life/js/biot_jquery.easing.1.3.js?action=raw&ctype=text/javascript"></script> | |
- | + | <script src="https://2013.igem.org/Team:UESTC_Life/js/biot_jquery.booklet.1.1.0.min.js?action=raw&ctype=text/javascript"></script> | |
- | + | ||
- | + | ||
- | + | <!--[if lte IE 7]> | |
- | + | <style> | |
- | + | /* Inline block fix */ | |
- | + | #dock ul { | |
- | + | display: inline; | |
- | + | zoom: 1; | |
- | + | } | |
- | + | #dock li, #dock li a { | |
- | + | display: inline; | |
- | + | zoom: 1; | |
- | + | } | |
- | + | /* Image quality fix */ | |
- | + | img { | |
- | + | -ms-interpolation-mode: bicubic; | |
- | + | } | |
- | + | #dock li a span { | |
- | + | filter: alpha(opacity=40); | |
- | + | } | |
- | + | </style> | |
- | + | <![endif]--> | |
+ | |||
+ | <script> | ||
+ | //library | ||
+ | function distance(x0, y0, x1, y1) { | ||
+ | var xDiff = x1-x0; | ||
+ | var yDiff = y1-y0; | ||
+ | |||
+ | return Math.sqrt(xDiff*xDiff + yDiff*yDiff); | ||
+ | } | ||
- | + | $(document).ready(function() { | |
- | // | + | var proximity = 180; |
- | + | var iconSmall = 48, iconLarge = 98; //css also needs changing to compensate with size | |
- | + | var iconDiff = (iconLarge - iconSmall); | |
- | + | var mouseX, mouseY; | |
- | + | var dock = $("#dock"); | |
- | + | var animating = false, redrawReady = false; | |
- | + | ||
+ | $(document.body).removeClass("no_js"); | ||
- | $(document). | + | //below are methods for maintaining a constant 60fps redraw for the dock without flushing |
- | + | $(document).bind("mousemove", function(e) { | |
- | + | if (dock.is(":visible")) { | |
- | + | mouseX = e.pageX; | |
- | + | mouseY = e.pageY; | |
- | + | ||
- | + | ||
- | + | redrawReady = true; | |
- | + | registerConstantCheck(); | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | + | }); | |
- | + | ||
- | + | function registerConstantCheck() { | |
+ | if (!animating) { | ||
+ | animating = true; | ||
- | + | window.setTimeout(callCheck, 15); | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
+ | } | ||
+ | |||
+ | function callCheck() { | ||
+ | sizeDockIcons(); | ||
- | + | animating = false; | |
- | + | ||
- | + | if (redrawReady) { | |
- | + | redrawReady = false; | |
- | + | registerConstantCheck(); | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | }); | + | } |
- | + | ||
- | + | //do the maths and resize each icon | |
- | + | function sizeDockIcons() { | |
- | + | dock.find("li").each(function() { | |
+ | //find the distance from the center of each icon | ||
+ | var centerX = $(this).offset().left + ($(this).outerWidth()/2.0); | ||
+ | var centerY = $(this).offset().top + ($(this).outerHeight()/2.0); | ||
+ | |||
+ | var dist = distance(centerX, centerY, mouseX, mouseY); | ||
+ | |||
+ | //determine the new sizes of the icons from the mouse distance from their centres | ||
+ | var newSize = (1 - Math.min(1, Math.max(0, dist/proximity))) * iconDiff + iconSmall; | ||
+ | $(this).find("a").css({width: newSize}); | ||
+ | }); | ||
+ | } | ||
+ | }); | ||
+ | </script> | ||
+ | |||
<body> | <body> | ||
<script> | <script> |
Revision as of 15:14, 26 August 2013