User:Eleanorg/Prototyping Yr 1 Timester 1/jQuery Crossfade: Difference between revisions

Latest revision as of 18:19, 1 December 2011

An html page containing two images, one over the other, which crossfade based on the mouse position within the window.

<!DOCTYPE: html>
<html>
<head>
<script src="jquery.js"></script>     // relies upon jQuery being saved in same directory

<script>
$(window).mousemove(function (event){
  console.log("mouse!", event);
  var o = Math.min(1.0, event.pageX / $(window).width());
  console.log(o);
  $("#imga").css('opacity', o)        // equivalent to #imga {opacity:var;} in css
  $("#imgb").css('opacity', 1.0-o)    // inverts the percentage for #imgb, so they'll crossfade
});
</script>


<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
  
    </head><body>
       <div>
         <p>percent is: 0.46</p>

         <img id="imga" src="shipTrack3.cgi_files/4552559587_d35d7942ab_b.jpg" alt="http://www.flickr.com/photos/whiteknuckled/4552559587/" style="position: absolute;">

         <img id="imgb" src="shipTrack3.cgi_files/4228521046_0c421e03f0_o.jpg">
         
       </div>
    <sfdocready id="sfDocReady"></sfdocready></body></html>