ryan5500 · April 29, 2010 10:11
diff --git a/zooming.html b/zooming.html
 <!DOCTYPE html>
 <html>
 <head>
 <script type="text/javascript" src="jquery.js"></script> 
 <script type="text/javascript" src="jquery.rightClick.js"></script> 
 <script type="text/javascript">
 $(function() {
    var zoom_ratio = 1;

    //set original coords
    $('#origin').data('pos', {top: 0, left: 0});
    $('#box').data('pos', {top: 50, left: 50});

    $('#origin').data('size', {width: 1, height: 1});
    $('#box').data('size', {width: 100, height: 100});

    //zoom in
    $('#view_window').click(function(event) {
        var new_origin = {x: (event.pageX - 150) / zoom_ratio, y: (event.pageY - 150) / zoom_ratio};
        zoom_ratio += 1;

        zoom(new_origin, zoom_ratio);		
    });

    //zoom out
    $('#view_window').rightClick(function(event) {
        var new_origin = {x: (event.pageX - 150) / zoom_ratio, y: (event.pageY - 150) / zoom_ratio};
        zoom_ratio -= 1;

        zoom(new_origin, zoom_ratio);		
    });

    //zoom process
 	function zoom(new_origin, zoom_ratio) {
 	    $('#content').children().each(function() {
 		$(this).width($(this).data('size').width * zoom_ratio).
 			height($(this).data('size').height * zoom_ratio).
 			offset({top:    ($(this).data('pos').top - new_origin.y) * zoom_ratio + $('#view_window').height() / 2,
                    left:   ($(this).data('pos').left - new_origin.x) * zoom_ratio + $('#view_window').width() / 2 });
 	    });
 	}		
 });
 </script>
 <style>
    * {
        margin: 0;
        padding: 0;
    }
    #view_window {
        /* for crop viewport */
        position: absolute;
        overflow: hidden;
        width: 300px;
        height: 300px;

        border: 1px solid gray; 
    }

    #content {
        position: absolute;
    }

    .box {
        position: absolute;
        width: 100px;
        height: 100px;
        background-color: red;
    }

    .point {
        width: 1px;
        height: 1px;
        position: absolute;
        background-color: blue;
    }
 </style>
 </head>
 <body>
    <div id="view_window">
        <div id="content">
            <div id="origin" class="point" style="top: 150px; left: 150px;"></div>
            <div id="box" class="box" style="top: 200px; left: 200px;"></div>
        </div>
    </div>
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<script type="text/javascript" src="jquery.js"></script>
	<script type="text/javascript" src="jquery.rightClick.js"></script>
	<script type="text/javascript">
	$(function() {
	var zoom_ratio = 1;

	//set original coords
	$('#origin').data('pos', {top: 0, left: 0});
	$('#box').data('pos', {top: 50, left: 50});

	$('#origin').data('size', {width: 1, height: 1});
	$('#box').data('size', {width: 100, height: 100});

	//zoom in
	$('#view_window').click(function(event) {
	var new_origin = {x: (event.pageX - 150) / zoom_ratio, y: (event.pageY - 150) / zoom_ratio};
	zoom_ratio += 1;

	zoom(new_origin, zoom_ratio);
	});

	//zoom out
	$('#view_window').rightClick(function(event) {
	var new_origin = {x: (event.pageX - 150) / zoom_ratio, y: (event.pageY - 150) / zoom_ratio};
	zoom_ratio -= 1;

	zoom(new_origin, zoom_ratio);
	});

	//zoom process
	function zoom(new_origin, zoom_ratio) {
	$('#content').children().each(function() {
	$(this).width($(this).data('size').width * zoom_ratio).
	height($(this).data('size').height * zoom_ratio).
	offset({top: ($(this).data('pos').top - new_origin.y) * zoom_ratio + $('#view_window').height() / 2,
	left: ($(this).data('pos').left - new_origin.x) * zoom_ratio + $('#view_window').width() / 2 });
	});
	}
	});
	</script>
	<style>
	* {
	margin: 0;
	padding: 0;
	}
	#view_window {
	/* for crop viewport */
	position: absolute;
	overflow: hidden;
	width: 300px;
	height: 300px;

	border: 1px solid gray;
	}

	#content {
	position: absolute;
	}

	.box {
	position: absolute;
	width: 100px;
	height: 100px;
	background-color: red;
	}

	.point {
	width: 1px;
	height: 1px;
	position: absolute;
	background-color: blue;
	}
	</style>
	</head>
	<body>
	<div id="view_window">
	<div id="content">
	<div id="origin" class="point" style="top: 150px; left: 150px;"></div>
	<div id="box" class="box" style="top: 200px; left: 200px;"></div>
	</div>
	</div>
	</body>
	</html>