Team:UESTC Life

From 2013.igem.org

(Difference between revisions)
Line 1: Line 1:
<html>
<html>
-
    <head>
+
<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" />
-
        <title>UESTC LIFE</title>
+
<link rel="stylesheet" href="https://2013.igem.org/Team:UESTC_Life/css/style.css?action=raw&ctype=text/css" type="text/css" media="screen"/>
-
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
+
<link href="https://2013.igem.org/Team:UESTC_Life/css/style_dock.css?action=raw&ctype=text/css" rel="stylesheet" type="text/css" />
-
<meta http-equiv="X-UA-Compatible" content="IE=8" />
+
-
        <meta name="keywords" content="jquery, book, flip, pages, moleskine, booklet, plugin, css3 "/>
+
-
<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-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.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>
+
<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]>
+
<!--[if lte IE 7]>
-
<style>
+
<style>
-
/* Inline block fix */
+
/* Inline block fix */
-
#dock ul {
+
#dock ul {
-
display: inline;
+
display: inline;
-
zoom: 1;
+
zoom: 1;
-
}
+
}
-
#dock li, #dock li a {
+
#dock li, #dock li a {
-
display: inline;
+
display: inline;
-
zoom: 1;
+
zoom: 1;
-
}
+
}
-
/* Image quality fix */
+
/* Image quality fix */
-
img {
+
img {
-
-ms-interpolation-mode: bicubic;
+
-ms-interpolation-mode: bicubic;
-
}
+
}
-
#dock li a span {
+
#dock li a span {
-
filter: alpha(opacity=40);
+
filter: alpha(opacity=40);
-
}
+
}
-
</style>
+
</style>
-
<![endif]-->
+
<![endif]-->
 +
 +
<script>
 +
//library
 +
function distance(x0, y0, x1, y1) {
 +
var xDiff = x1-x0;
 +
var yDiff = y1-y0;
 +
 +
return Math.sqrt(xDiff*xDiff + yDiff*yDiff);
 +
}
-
<script>
+
$(document).ready(function() {
-
//library
+
var proximity = 180;
-
function distance(x0, y0, x1, y1) {
+
var iconSmall = 48, iconLarge = 98; //css also needs changing to compensate with size
-
var xDiff = x1-x0;
+
var iconDiff = (iconLarge - iconSmall);
-
var yDiff = y1-y0;
+
var mouseX, mouseY;
-
+
var dock = $("#dock");
-
return Math.sqrt(xDiff*xDiff + yDiff*yDiff);
+
var animating = false, redrawReady = false;
-
}
+
 +
$(document.body).removeClass("no_js");
-
$(document).ready(function() {
+
//below are methods for maintaining a constant 60fps redraw for the dock without flushing
-
var proximity = 180;
+
$(document).bind("mousemove", function(e) {
-
var iconSmall = 48, iconLarge = 98; //css also needs changing to compensate with size
+
if (dock.is(":visible")) {
-
var iconDiff = (iconLarge - iconSmall);
+
mouseX = e.pageX;
-
var mouseX, mouseY;
+
mouseY = e.pageY;
-
var dock = $("#dock");
+
-
var animating = false, redrawReady = false;
+
-
$(document.body).removeClass("no_js");
+
redrawReady = true;
-
+
registerConstantCheck();
-
//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();
+
function registerConstantCheck() {
 +
if (!animating) {
 +
animating = true;
-
animating = false;
+
window.setTimeout(callCheck, 15);
-
+
-
if (redrawReady) {
+
-
redrawReady = false;
+
-
registerConstantCheck();
+
-
}
+
}
}
 +
}
 +
 +
function callCheck() {
 +
sizeDockIcons();
-
//do the maths and resize each icon
+
animating = false;
-
function sizeDockIcons() {
+
-
dock.find("li").each(function() {
+
if (redrawReady) {
-
//find the distance from the center of each icon
+
redrawReady = false;
-
var centerX = $(this).offset().left + ($(this).outerWidth()/2.0);
+
registerConstantCheck();
-
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>
+
-
+
//do the maths and resize each icon
-
+
function sizeDockIcons() {
-
    </head>
+
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

Loading pages...