ryan5500 · April 29, 2010 12:05
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-ui.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 });
 	    });
 	}		

    //pan process 
    $('#scroll_toggle').click(function(event) {
        $('#scroll_layer').toggleClass('invisible'); 
        $('#scroll_layer').toggleClass('visible'); 
    }); 

    $('#scroll_layer').draggable({
        helper: function() {
            return $('<div />');
        },       
        start: function(ev, ui) {
            var offset = $('#content').offset();
            $('#content').data('top', offset.top);
            $('#content').data('left', offset.left);
        },
        drag: function(ev, ui) {
            var content = $('#content');
            var offset = content.offset();

            var dragTop = ui.position.top + content.data('top'); 
            var dragLeft = ui.position.left + content.data('left');

            $('#content').css('top', dragTop).
                           css('bottom', -dragTop).
                           css('left', dragLeft).
                           css('right', -dragLeft);
        }

    });

 });
 </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;
    }

    #scroll_layer {
        position: absolute;
        width: 300px;
        height: 300px;
        background-color: lime;
        opacity: 0.3;
    }

    .invisible {
        visibility: hidden;
    }

    .visible {
        visibility: visible;
    }

    #scroll_toggle {
        position: absolute;
        top: 400px;
    }

    .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>
    <div id="scroll_layer" class="invisible"></div>
    <button id="scroll_toggle">scroll toggle</button>
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<script type="text/javascript" src="jquery.js"></script>
	<script type="text/javascript" src="jquery-ui.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 });
	});
	}

	//pan process
	$('#scroll_toggle').click(function(event) {
	$('#scroll_layer').toggleClass('invisible');
	$('#scroll_layer').toggleClass('visible');
	});

	$('#scroll_layer').draggable({
	helper: function() {
	return $('<div />');
	},
	start: function(ev, ui) {
	var offset = $('#content').offset();
	$('#content').data('top', offset.top);
	$('#content').data('left', offset.left);
	},
	drag: function(ev, ui) {
	var content = $('#content');
	var offset = content.offset();

	var dragTop = ui.position.top + content.data('top');
	var dragLeft = ui.position.left + content.data('left');

	$('#content').css('top', dragTop).
	css('bottom', -dragTop).
	css('left', dragLeft).
	css('right', -dragLeft);
	}

	});

	});
	</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;
	}

	#scroll_layer {
	position: absolute;
	width: 300px;
	height: 300px;
	background-color: lime;
	opacity: 0.3;
	}

	.invisible {
	visibility: hidden;
	}

	.visible {
	visibility: visible;
	}

	#scroll_toggle {
	position: absolute;
	top: 400px;
	}

	.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>
	<div id="scroll_layer" class="invisible"></div>
	<button id="scroll_toggle">scroll toggle</button>
	</body>
	</html>