Friday, March 9, 2012

Mouse Zoom In and Mouse Zoom out code in Javascript


//Script for Mouse events.
<script language="javascript">
        window.onload = function () {

            if (window.addEventListener) {
 //Setting mouse event for the entire document, we also set the for particular event
                document.addEventListener('DOMMouseScroll', moveObject, false);
            }

            //for IE/OPERA etc
             document.onmousewheel = moveObject;
        }
        function moveObject(event) {
            var delta = 0;

            if (!event) event = window.event;

            // normalize the delta
            if (event.wheelDelta) {

                // IE and Opera
                delta = event.wheelDelta / 60;

            } else if (event.detail) {

                // W3C
                delta = -event.detail / 2;
            }

            var currPos = document.getElementById('scroll').offsetTop;

            //calculating the next position of the object
            var nextPos = parseInt(currPos) - (delta * 10);

            if (currPos > nextPos) {
                //code for zoom in
            }
            else {
                //code for zoom out
            }
        }

    </script>

     //HTML Code – Div for setting the Mouse event (up/down) dynamically
     <div id="scroll" style="position: absolute;display:none;">
    </div>