topical media & game development
[] readme course(s) preface I 1 2 II 3 4 III 5 6 7 IV 8 9 10 V 11 12 afterthought(s) appendix reference(s) example(s) resource(s) _

talk show tell print

lib-present-jquery-desktop-basic-steps-zooming.htm / htm



  <html>

head 


  <head>
    <script src="lib-present-jquery-desktop-basic-steps-lib-jquery-1.2.6.js"></script>
    <script src="lib-present-jquery-desktop-basic-steps-lib-jquery-ui-core-drag-drop-select-1.5.3.js"></script>
    <script src="lib-present-jquery-desktop-basic-steps-lib-jquery.mousewheel.js" ></script>
    <link rel="stylesheet" href="lib-present-jquery-desktop-basic-steps-css-demo.css" type="text/css" media="screen" charset="utf-8">
    <title>Zooming</title>
    <script>

functions


      function rescale(selector, property, percent) {
        var oldValue = parseFloat(selector.css(property));
        selector.css(property, oldValue*percent);
      }
      
      function rescaleRelative(selector, property, relative, percent) {
        var oldValue = parseFloat(selector.css(property)) - relative;
        selector.css(property, oldValue*percent + relative);      
      }

ready


      document.ready(function() {
        $('#container').mousewheel(function(event, delta) {
         
          var containerTopOffset = parseFloat($('#container').css('top'));
          var containerLeftOffset = parseFloat($('#container').css('left'));
          var scale = 0.1;
          var percent = 1 + delta*scale;

box propagate


          $('.box').each(function() {
            rescaleRelative(this, 
              'top', 
                event.clientY - 
                containerTopOffset - 
                parseFloat(this.css('height')) / 2,
              percent);
            rescaleRelative(this, 
              'left', 
                event.clientX - 
                containerLeftOffset - 
                parseFloat(this.css('width')) / 2, 
              percent);

rescale


            rescale(this, 'width', percent);
            rescale(this, 'height', percent);
            rescale(this, 'font-size', percent);
          });
          event.preventDefault();
        });
      });
    </script>

style 


    <style type="text/css" media="screen">
      #container {
        position: absolute;
        left: 0;
        top: 150px;
        right: 0;
        bottom: 0;
        overflow: hidden;
      }

box


      .box {
        position: absolute;
        left: 0;
      }

boxes


      #box1 {
        top: 0;
      }
      
      #box2 {
        top: 160px;
      }
      
      #box3 {
        top: 320px;
      }
      
      #box4 {
        top: 480px;
      }
    </style>
  </head>

body 


  <body>
    <h1>Zooming</h1>
    <p>
      This demo demonstrates zooming. It relies on the <a href="http://plugins.jquery.com/project/mousewheel">mousewheel plugin</a> to detect mousewheel events. Use the mousewheel in the middle of the screen to zoom in and out. Notice how the boxes are resized and their relative positions are preserved.<br />
      Use <tt>right click > view source</tt> to see the underlying Javascript code.
    </p>

containers 


    <div id="container">
      <div id="box1" class="box">Blue</div>
      <div id="box2" class="box">Red</div>
      <div id="box3" class="box">Yellow</div>
      <div id="box4" class="box">Green</div>
    </div>
  </body>
[] readme course(s) preface I 1 2 II 3 4 III 5 6 7 IV 8 9 10 V 11 12 afterthought(s) appendix reference(s) example(s) resource(s) _

(C) Æliens 04/09/2009

You may not copy or print any of this material without explicit permission of the author or the publisher. In case of other copyright issues, contact the author.