Team:UIUC-Illinois/JStestpage

From 2012.igem.org

(Difference between revisions)

Revision as of 15:31, 1 June 2012

<!DOCTYPE HTML>

@@ Line 1: / Line 1: @@
+<!DOCTYPE HTML>
 <html>
-<head>
+  <head>
-<script type='text/javascript'>
+    <style>
-function addScript()
+      body {
-{
+        margin: 0px;
-     var str = "<script>alert('i am here');<\/script>";
+        padding: 0px;
-    var newdiv = document.createElement('div');
+      }
-    newdiv.innerHTML = str;
+      canvas {
-    document.getElementById('target').appendChild(newdiv);
+        border: 1px solid #9C9898;
-}
+      }
-</script>
+      #tango {
-</head>
+        position: absolute;
-<body>
+        top: 10px;
-<input type="button" value="add script" onclick="addScript()"/>
+        left: 10px;
-<div>hello world</div>
+        padding: 10px;
-<div id="target"></div>
+      }
-</body>
+      #container {
+        background-image: url('http://www.html5canvastutorials.com/demos/assets/greenstars.jpg');
+        display: inline-block;
+        overflow: hidden;
+        height: 365px;
+        width: 580px;
+      }
+     </style>
+    <script src="http://www.html5canvastutorials.com/libraries/kinetic-v3.9.7.js"></script>
+    <script>
+      function addStar(layer, stage) {
+      	var trans = null;
+        var scale = Math.random();
+        var star = new Kinetic.Star({
+          x: Math.random() * stage.getWidth(),
+          y: Math.random() * stage.getHeight(),
+          numPoints: 5,
+          innerRadius: 50,
+          outerRadius: 100,
+          fill: '#1e4705',
+          stroke: '#89b717',
+          alpha: 0.9,
+          strokeWidth: 10,
+          draggable: true,
+          scale: {
+            x: scale,
+            y: scale
+          },
+          rotationDeg: Math.random() * 180,
+          shadow: {
+            color: 'black',
+            blur: 10,
+            offset: [5, 5],
+            alpha: 0.6
+          },
+          startScale: scale
+        });
+        star.on('dragstart', function() {
+          if(trans) {
+            trans.stop();
+          }
+          star.moveToTop();
+          star.setAttrs({
+            shadow: {
+              offset: {
+                x: 15,
+                y: 15
+              }
+            },
+            scale: {
+              x: star.attrs.startScale * 1.2,
+              y: star.attrs.startScale * 1.2
+            }
+          });
+        });
+        star.on('dragend', function() {
+          trans = star.transitionTo({
+            duration: 0.5,
+            easing: 'elastic-ease-out',
+            shadow: {
+              offset: {
+                x: 5,
+                y: 5
+              }
+            },
+            scale: {
+              x: star.attrs.startScale,
+              y: star.attrs.startScale
+            }
+          })
+        });
+        layer.add(star);
+      }
+      window.onload = function() {
+        var stage = new Kinetic.Stage({
+          container: 'container',
+          width: 578,
+          height: 363
+        });
+        var layer = new Kinetic.Layer();
+        for(var n = 0; n < 10; n++) {
+          addStar(layer, stage);
+        }
+        stage.add(layer);
+      };
+    </script>
+  </head>
+  <body onmousedown="return false;">
+    <div id="container"></div>
+  </body>
 </html>