ozero/gist:1007664

## gistfile1.html
<html>
<head>
<script src="./jquery.js"></script>
<script>

zoomRatio=1;
loopCount=0;
mouseX=0;
mouseY=0;

$(document).ready(function(){
	setzoomRatio();
});

$(document).mousemove(function(e){
	mouseX=e.pageX;
	mouseY=e.pageY - 80;
	draw()
});

function draw(){

	a0x=300;a0y=300;
	a1x=600;a1y=300;
	a2x=600;a2y=500;
	a3x=300;a3y=500;
	$('#a0').css("left",a0x);
	$('#a0').css("top", a0y);
	$('#a1').css("left",a1x);
	$('#a1').css("top", a1y);
	$('#a2').css("left",a2x);
	$('#a2').css("top", a2y);
	$('#a3').css("left",a3x);
	$('#a3').css("top", a3y);

	b0x = mouseX;
	b0y = mouseY;
	$('#b0').css("left",b0x);
	$('#b0').css("top", b0y);

	cr = 0.5
	c0x = a0x - (mouseX - a0x)*cr;
	c0y = a0y - (mouseY - a0y)*cr;
	c1x = a1x - (mouseX - a1x)*cr;
	c1y = a1y - (mouseY - a1y)*cr;
	c2x = a2x - (mouseX - a2x)*cr;
	c2y = a2y - (mouseY - a2y)*cr;
	c3x = a3x - (mouseX - a3x)*cr;
	c3y = a3y - (mouseY - a3y)*cr;
	$('#c0').css("left",c0x);
	$('#c0').css("top", c0y);
	$('#c1').css("left",c1x);
	$('#c1').css("top", c1y);
	$('#c2').css("left",c2x);
	$('#c2').css("top", c2y);
	$('#c3').css("left",c3x);
	$('#c3').css("top", c3y);

	dr = zoomRatio;
	d0x = a0x - (mouseX - a0x)*dr;
	d0y = a0y - (mouseY - a0y)*dr;
	d1x = a1x - (mouseX - a1x)*dr;
	d1y = a1y - (mouseY - a1y)*dr;
	d2x = a2x - (mouseX - a2x)*dr;
	d2y = a2y - (mouseY - a2y)*dr;
	d3x = a3x - (mouseX - a3x)*dr;
	d3y = a3y - (mouseY - a3y)*dr;
	$('#d0').css("left",d0x);
	$('#d0').css("top", d0y);
	$('#d1').css("left",d1x);
	$('#d1').css("top", d1y);
	$('#d2').css("left",d2x);
	$('#d2').css("top", d2y);
	$('#d3').css("left",d3x);
	$('#d3').css("top", d3y);

	$('#r1').css("left",(d0x<d1x)?d0x:d1x );
	$('#r1').css("top", (d0y<d3y)?d0y:d3y);
	$('#r1').css("width",  Math.abs(d1x - d0x)+"px");
	$('#r1').css("height", Math.abs(d3y - d0y)+"px");

}
function setzoomRatio(e){
	zoomRatio = 4 * Math.sin(loopCount * (Math.PI / 180));
	loopCount++;
	draw();
	$("#b0").html(parseInt(zoomRatio*100)+"%");
	//console.log("[w/h]"+Math.abs(d1x - d0x)+"/"+Math.abs(d3y - d0y));
	if(loopCount>360){loopCount=0;}
	setTimeout("setzoomRatio()", 10);
}


</script>
<style>
.demo *{position:absolute;width:10px;height:10px;font-size:8px;}
.da p{background-color:#f00;}
.db p{background-color:#0f0;}
.dc p{background-color:#00f;}
.dd p{background-color:#666;}
#r0{border:1px dashed #00f;}
#r1{border:1px dashed #666;}
</style>
</head>
<body>
<div class="demo da">
<p id="a0">a0</p>
<p id="a1">a1</p>
<p id="a2">a2</p>
<p id="a3">a3</p>
</div>

<div class="demo db">
<p id="b0" style="white-space:nowrap;">b</p>
</div>

<div class="demo dc">
<p id="c0">c0</p>
<p id="c1">c1</p>
<p id="c2">c2</p>
<p id="c3">c3</p>
</div>
<div class="demo dd">
<p id="d0">d0</p>
<p id="d1">d1</p>
<p id="d2">d2</p>
<p id="d3">d3</p>
</div>

<div class="demo">
<p id="r1" />
</div>


<br>
とある矩形を任意の点を中心に拡大縮小してみるテスト。
</body>
</html>
	<html>
	<head>
	<script src="./jquery.js"></script>
	<script>

	zoomRatio=1;
	loopCount=0;
	mouseX=0;
	mouseY=0;

	$(document).ready(function(){
	setzoomRatio();
	});

	$(document).mousemove(function(e){
	mouseX=e.pageX;
	mouseY=e.pageY - 80;
	draw()
	});

	function draw(){

	a0x=300;a0y=300;
	a1x=600;a1y=300;
	a2x=600;a2y=500;
	a3x=300;a3y=500;
	$('#a0').css("left",a0x);
	$('#a0').css("top", a0y);
	$('#a1').css("left",a1x);
	$('#a1').css("top", a1y);
	$('#a2').css("left",a2x);
	$('#a2').css("top", a2y);
	$('#a3').css("left",a3x);
	$('#a3').css("top", a3y);

	b0x = mouseX;
	b0y = mouseY;
	$('#b0').css("left",b0x);
	$('#b0').css("top", b0y);

	cr = 0.5
	c0x = a0x - (mouseX - a0x)*cr;
	c0y = a0y - (mouseY - a0y)*cr;
	c1x = a1x - (mouseX - a1x)*cr;
	c1y = a1y - (mouseY - a1y)*cr;
	c2x = a2x - (mouseX - a2x)*cr;
	c2y = a2y - (mouseY - a2y)*cr;
	c3x = a3x - (mouseX - a3x)*cr;
	c3y = a3y - (mouseY - a3y)*cr;
	$('#c0').css("left",c0x);
	$('#c0').css("top", c0y);
	$('#c1').css("left",c1x);
	$('#c1').css("top", c1y);
	$('#c2').css("left",c2x);
	$('#c2').css("top", c2y);
	$('#c3').css("left",c3x);
	$('#c3').css("top", c3y);

	dr = zoomRatio;
	d0x = a0x - (mouseX - a0x)*dr;
	d0y = a0y - (mouseY - a0y)*dr;
	d1x = a1x - (mouseX - a1x)*dr;
	d1y = a1y - (mouseY - a1y)*dr;
	d2x = a2x - (mouseX - a2x)*dr;
	d2y = a2y - (mouseY - a2y)*dr;
	d3x = a3x - (mouseX - a3x)*dr;
	d3y = a3y - (mouseY - a3y)*dr;
	$('#d0').css("left",d0x);
	$('#d0').css("top", d0y);
	$('#d1').css("left",d1x);
	$('#d1').css("top", d1y);
	$('#d2').css("left",d2x);
	$('#d2').css("top", d2y);
	$('#d3').css("left",d3x);
	$('#d3').css("top", d3y);

	$('#r1').css("left",(d0x<d1x)?d0x:d1x );
	$('#r1').css("top", (d0y<d3y)?d0y:d3y);
	$('#r1').css("width", Math.abs(d1x - d0x)+"px");
	$('#r1').css("height", Math.abs(d3y - d0y)+"px");

	}
	function setzoomRatio(e){
	zoomRatio = 4 * Math.sin(loopCount * (Math.PI / 180));
	loopCount++;
	draw();
	$("#b0").html(parseInt(zoomRatio*100)+"%");
	//console.log("[w/h]"+Math.abs(d1x - d0x)+"/"+Math.abs(d3y - d0y));
	if(loopCount>360){loopCount=0;}
	setTimeout("setzoomRatio()", 10);
	}



	</script>
	<style>
	.demo *{position:absolute;width:10px;height:10px;font-size:8px;}
	.da p{background-color:#f00;}
	.db p{background-color:#0f0;}
	.dc p{background-color:#00f;}
	.dd p{background-color:#666;}
	#r0{border:1px dashed #00f;}
	#r1{border:1px dashed #666;}
	</style>
	</head>
	<body>
	<div class="demo da">
	<p id="a0">a0</p>
	<p id="a1">a1</p>
	<p id="a2">a2</p>
	<p id="a3">a3</p>
	</div>

	<div class="demo db">
	<p id="b0" style="white-space:nowrap;">b</p>
	</div>

	<div class="demo dc">
	<p id="c0">c0</p>
	<p id="c1">c1</p>
	<p id="c2">c2</p>
	<p id="c3">c3</p>
	</div>
	<div class="demo dd">
	<p id="d0">d0</p>
	<p id="d1">d1</p>
	<p id="d2">d2</p>
	<p id="d3">d3</p>
	</div>

	<div class="demo">
	<p id="r1" />
	</div>




	<br>
	とある矩形を任意の点を中心に拡大縮小してみるテスト。
	</body>
	</html>