jQuery Full Screen Mousemove demo

Just a quick demo which shows how jQuery can create some advanced mouse interaction using the global mouse position.

HTML

<ul id="pages">
  <li id="p1">H</li>
  <li id="p2">E</li>
  <li id="p3">L</li>
  <li id="p4">L</li>
  <li id="p5">O</li>
  <li id="p6">W</li>
  <li id="p7">O</li>
  <li id="p8">R</li>
  <li id="p9">L</li>
  <li id="p10">D</li>
</ul>

CSS

div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, caption {margin: 0;padding: 0;border: 0;outline: 0;font-weight: inherit;font-style: inherit;font-size: 100%;font-family:inherit;vertical-align: baseline;line-height:100%;}
body,html {margin:0;padding:0;background:#000; height:100%; line-height:80%; overflow:auto;}
#pages{height:100%;}
#pages li{color:#fff; height:100%; text-align:center; list-style-type:none; overflow:hidden;}
#p1{background:red;}
#p2{background:orange;}
#p3{background:yellow;}
#p4{background:lightgreen;}
#p5{background:green;}
#p6{background:lightgreen;}
#p7{background:lightblue;}
#p8{background:blue;}
#p9{background:darkblue;}
#p10{background:purple;}

JavaScript

//vars
var pages,numSections;

// ready
$(document).ready(function() {  
    
    //cache the selector and define the number of pages
    pages = $('#pages li'); 
    numSections = (pages.length) / $(document).width();
    
    //hides all the pages except the first one
    pages.slice(1).hide();
    
    //set the font height
    setfontheight($(window).height());
    
    console.log("\n\n window height : " + $(window).height());
    
});

//on mouse move (e is the event properties)
$(document).mousemove(function(e) {    
    pages.eq(parseInt(numSections * e.clientX)).show().siblings().hide();
});

// resizes
$(window).resize(function() {
    numSections = (pages.length+1) / $(document).width();   
    setfontheight($(window).height());
});

//sets the font height
setfontheight = function(s){   
    pages.css({'font-size':s});
};