ryan5500/panning.html

## panning.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;

    $('#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>
	<!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>