Merge branch 'joelrbrandt-new-web-worker-demo'
This commit is contained in:
commit
4e0d1f7050
|
@ -1,38 +1,39 @@
|
|||
<html>
|
||||
<head>
|
||||
<title>Worker</title>
|
||||
<style>
|
||||
body {
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
#status {
|
||||
height: 200px;
|
||||
max-height: 200px;
|
||||
border: thin solid black;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
#square {
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
width: 75px;
|
||||
height: 75px;
|
||||
background-color: rgba(0, 0, 220, 0.3);
|
||||
z-index: -1;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Web Worker Demo</h1>
|
||||
<p>Works in Chrome, Safari, and Firefox. Web worker portion works in Opera.</p>
|
||||
<p>Use arrow keys to change the direction of the animated square. The square is animated with <em>requestAnimationFrame</em>.</p>
|
||||
<p>Click the button below to start or stop the worker.</p>
|
||||
<div><input type="button" value="start worker" id="toggleWorker" /></div>
|
||||
<h2>Messages from Worker:</h2>
|
||||
<div id="status"></div>
|
||||
<div id="square"></div>
|
||||
<script src="../js/worker-main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
<title>Web Worker</title>
|
||||
<style>
|
||||
body {
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
#status {
|
||||
height: 200px;
|
||||
max-height: 200px;
|
||||
border: thin solid #aaa;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
#animationWrapper {
|
||||
position: relative;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
#square {
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background-color: rgba(0, 0, 220, 0.3);
|
||||
}
|
||||
</style>
|
||||
<article>
|
||||
<p>This demo shows how main window animation isn't interrupted by Web Workers. <small>Note that the animation does not work in Opera (due to lack of requestAnimationFrame support).</small></p>
|
||||
<p>Use arrow keys to change the direction of the animated square. The square is animated with <em>requestAnimationFrame</em>.</p>
|
||||
<div id="animationWrapper">
|
||||
<div id="square"></div>
|
||||
</div>
|
||||
<p>Click the button below to start or stop the worker.</p>
|
||||
<div><input type="button" value="start worker" id="toggleWorker" /></div>
|
||||
<h2>Messages from Worker:</h2>
|
||||
<div id="status"></div>
|
||||
<script src="/js/worker-main.js"></script>
|
||||
</article>
|
|
@ -4,7 +4,7 @@
|
|||
(function () {
|
||||
"use strict";
|
||||
|
||||
var SQUARE_SIZE = 75;
|
||||
var SQUARE_SIZE = 50;
|
||||
var MOVEMENT_STEP = 3;
|
||||
|
||||
var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
|
||||
|
@ -52,26 +52,26 @@
|
|||
var top = parseInt(square.style.top, 10);
|
||||
var right = left + SQUARE_SIZE;
|
||||
var bottom = top + SQUARE_SIZE;
|
||||
|
||||
|
||||
switch (direction) {
|
||||
case 37: // left
|
||||
if (left > 0) {
|
||||
square.style.left = left - MOVEMENT_STEP;
|
||||
square.style.left = left - MOVEMENT_STEP + 'px';
|
||||
}
|
||||
break;
|
||||
case 38: // up
|
||||
if (top > 0) {
|
||||
square.style.top = top - MOVEMENT_STEP;
|
||||
square.style.top = top - MOVEMENT_STEP + 'px';
|
||||
}
|
||||
break;
|
||||
case 39: //right
|
||||
if (right < document.documentElement.clientWidth) {
|
||||
square.style.left = left + MOVEMENT_STEP;
|
||||
square.style.left = left + MOVEMENT_STEP + 'px';
|
||||
}
|
||||
break;
|
||||
case 40: // down
|
||||
if (bottom < document.documentElement.clientHeight) {
|
||||
square.style.top = top + MOVEMENT_STEP;
|
||||
square.style.top = top + MOVEMENT_STEP + 'px';
|
||||
}
|
||||
break;
|
||||
default:
|
||||
|
|
Loading…
Reference in New Issue