Untitled

<!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;

    $('#content').offset({top: $('#view_window').width() / 2, left: $('#view_window').height() / 2});

    $('#view_window').click(function(event) {
		//panning process
		var window_size = {width: $('#view_window').width(), height: $('#view_window').height()};
		var click_pos = {x: event.pageX, y:event.pageY};
		var now_pan = $('#content').offset();

		var next_pan = get_next_pan(click_pos, now_pan, zoom_ratio, +1, {x: window_size.width / 2, y:window_size.height / 2});
		$('#content').offset(next_pan);

		//zooming process
		zoom_ratio += 1;
		zoomin($('#content'), zoom_ratio);
    });

    $('#view_window').rightClick(function(event) {
        //panning process
		var window_size = {width: $('#view_window').width(), height: $('#view_window').height()};
		var click_pos = {x: event.pageX, y:event.pageY};
		var now_pan = $('#content').offset();

		var next_pan = get_next_pan(click_pos, now_pan, zoom_ratio, -1, {x: window_size.width / 2, y:window_size.height / 2});
		$('#content').offset(next_pan);

        //zooming process
        zoomout($('#content'), zoom_ratio);

        zoom_ratio -= 1;
    });

    function zoomin(target, zoom_ratio) {
        zooming(target, zoom_ratio, function(a, b) {return a * b; });
    }

    function zoomout(target, zoom_ratio) {
        console.log('zoomout');
        zooming(target, zoom_ratio, function(a, b) {return a / b; });
    }

    function zooming(target, zoom_ratio, op) {
         target.children().each(function() {
            $(this).width(op($(this).width(), zoom_ratio)).
                    height(op($(this).height(), zoom_ratio)).
                    css('top', op($(this).css('top'), zoom_ratio)).
                    css('left', op($(this).css('left'), zoom_ratio));
        });
    }

	function get_next_pan(click_pos, now_pan, zoom_ratio, zoom_step, origin) {
		//position on viewport layer => position on relative(zoomable) universe
		var universe_click_pos = {x: click_pos.x - now_pan.left, y: click_pos.y - now_pan.top};
		console.log('universe click pos:' + universe_click_pos.x + ',' + universe_click_pos.y);

		//position on relative universe => position on absolute universe
		var x_pos = {x: universe_click_pos.x / zoom_ratio, y: universe_click_pos.y / zoom_ratio};
		console.log('x pos:' + x_pos.x + ',' + x_pos.y);

		//position on absolute universe => next position on relative universe
		var u_c_dash = {x: x_pos.x * (zoom_ratio + zoom_step), y: x_pos.y * (zoom_ratio + zoom_step)};
		console.log('u_c_dash pos:' + u_c_dash.x + ',' + u_c_dash.y);

		//next position on relative universe => next pan for contents(universe layer)
		var next_pan = {left: origin.x - u_c_dash.x, top: origin.y - u_c_dash.y };
		console.log('next_pan:' + next_pan.left + ',' + next_pan.top );

		return next_pan;
	}
});
</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: 0px; left: 0px;"></div>
            <div id="box" class="box" style="top: 50px; left: 50px;"></div>
        </div>
    </div>
</body>
</html>