Difference between revisions of "Team:BostonU/Collaborations"

Line 1: Line 1:
 
{{BostonU_we_tryin}}
 
{{BostonU_we_tryin}}
 
<html>
 
<html>
−
<head>
+
    <head>
−
<style>
+
        <title>box-shadow-experiment</title>
−
 
+
        <style type="text/css">
 
#sideMenu, #top_title {display:none;}
 
#sideMenu, #top_title {display:none;}
 
body {background-color:white; }
 
body {background-color:white; }
Line 13: Line 13:
 
margin:0 auto;
 
margin:0 auto;
 
}
 
}
−
 
+
            #box-shadow-div{
−
#sketch {
+
                position: fixed;
−
  width: 1000px;
+
                width: 1px;
−
  height: 1000px;
+
                height: 1px;
−
  border: 1px solid gray;
+
                border-radius: 100%;
−
  background-color: yellow;
+
                background-color:black;
−
}
+
                box-shadow: 0 0 10px 10px black;
−
 
+
                top: 49%;
−
#myimg {
+
                left: 48.85%;
−
  position: absolute;
+
            }
−
  z-index: 1000;
+
        </style>
−
  width:50px;
+
        <script type="text/javascript">
−
}
+
            window.onload = function(){
−
 
+
                var bsDiv = document.getElementById("box-shadow-div");
−
</style>
+
                var x, y;
−
<body>
+
    // On mousemove use event.clientX and event.clientY to set the location of the div to the location of the cursor:
−
  <div id="sketch"></div>
+
                window.addEventListener('mousemove', function(event){
−
  <img src = "https://static.igem.org/mediawiki/2016/8/8d/T--BostonU--snapchatlogo.png" class="follow" id="myimg">
+
                    x = event.clientX;
−
</body>
+
                    y = event.clientY;                   
−
 
+
                    if ( typeof x !== 'undefined' ){
−
<script type="text/javascript">
+
                        bsDiv.style.left = x-5 + "px";
−
$("#sketch").mousemove(function(e){
+
                        bsDiv.style.top = y-5 + "px";
−
      $('.follow').css({'top': e.clientY, 'left': e.clientX});
+
                    }
−
});
+
                }, false);
−
</script>
+
            }
 +
        </script>
 +
    </head>
 +
    <body>
 +
        <div id="box-shadow-div"></div>
 +
    </body>
 +
</html>

Revision as of 19:45, 4 August 2016

box-shadow-experiment