hisasann · March 27, 2009 04:28
diff --git a/RunAwayFromMouseDiv.js b/RunAwayFromMouseDiv.js
 <!doctype html>
 <html lang="en">
 <head>
 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 	<title>RunAwayFromMouse.js</title>
 	<meta name="generator" content="TextMate http://macromates.com/">
 	<meta name="author" content="">
 </head>
 <script src="jquery.js"></script>
 <script type="text/javascript" charset="utf-8">
 	$(function() {
 		var targetElem = "div";
 		var count = jQuery.browser.safari ? 100 : 50;	// webkitならちょっと多め
 		var opacity = 0.7;
 		// div要素の作成
 		for(var i=0; i<count; ++i) {
 			console.log(getColor());
 			$("<div>")
 				.appendTo("#mover")
 				.addClass("move")
 				.css({
 					left: Math.random() * $(window).width() - 100 + "px",
 					top: Math.random() * $(window).height() - 100 + "px",
 					opacity: opacity,
 					backgroundColor: "#" + getColor()
 				});
 		}
 		// canvas要素の作成
 		// for(var i=0; i<count; ++i) {
 		// 	var canvas = $("<canvas>");
 		// 	canvas
 		// 		.attr("height", 100)
 		// 		.attr("width", 100)
 		// 		.css({
 		// 			position: "absolute",
 		// 			opacity: opacity,
 		// 			left: Math.random() * $(window).width() - 100 + "px",
 		// 			top: Math.random() * $(window).height() - 100 + "px"
 		// 		})
 		//     	.appendTo("#mover");
 		// 	
 		// 	var context = canvas[0].getContext('2d');
 		// 	context.beginPath();
 		// 	// ちょっとグリーンぽく
 		// 	context.fillStyle = ["rgb(", 0, ",", getRGB(), ",", getRGB(), ")"].join("");
 		// 	context.arc( 50, 50, 50, 0, Math.PI * 2, false);
 		// 	context.fill();
 		// }

 		function getColor() {
 			return "00" + Math.floor(Math.random() * 0xFFFF).toString(16);
 		}
 		function getRGB() {
 			return Math.floor(Math.random() * 200);
 		}
 		
 		var firstPointX = [],
 			firstPointY = [];

 		// offsetの保存
 		$("#mover").find(targetElem).each(function(index) {
 			var offset = $(this).offset();
 			firstPointX[index] = offset.left;
 			firstPointY[index] = offset.top;
 		});

 		$("html")
 			.mousemove(function(e) {
 				$("#mover").find(targetElem).each(function(index) {
 					var elem = $(this),
 						offset = elem.offset(),
 						theta = Math.atan2(offset.top - e.pageY, offset.left - e.pageX),
 						d = 1000 / Math.sqrt(Math.pow(e.pageX - offset.left, 2) + Math.pow(e.pageY - offset.top, 2)),
 						left = parseFloat(elem.css("left")) + d * Math.cos(theta) + (firstPointX[index] - offset.left) * 0.1 + "px",
 						top = parseFloat(elem.css("top")) + d * Math.cos(theta) + (firstPointY[index] - offset.top) * 0.1 + "px";
 		
 					elem.css("left", left);
 					elem.css("top", top);
 				});
 			})
 	});
 </script>
 <style type="text/css" media="screen">
 	html {
 		overflow: hidden;
 	}
 	.move {
 		width: 100px;
 		height: 100px;
 		border: 1px solid #999;
 		position: absolute;
 	}
 </style>
 <body>

 <div id="mover">
 </div>

 </body>
 </html>
	<!doctype html>
	<html lang="en">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>RunAwayFromMouse.js</title>
	<meta name="generator" content="TextMate http://macromates.com/">
	<meta name="author" content="">
	</head>
	<script src="jquery.js"></script>
	<script type="text/javascript" charset="utf-8">
	$(function() {
	var targetElem = "div";
	var count = jQuery.browser.safari ? 100 : 50; // webkitならちょっと多め
	var opacity = 0.7;
	// div要素の作成
	for(var i=0; i<count; ++i) {
	console.log(getColor());
	$("<div>")
	.appendTo("#mover")
	.addClass("move")
	.css({
	left: Math.random() * $(window).width() - 100 + "px",
	top: Math.random() * $(window).height() - 100 + "px",
	opacity: opacity,
	backgroundColor: "#" + getColor()
	});
	}
	// canvas要素の作成
	// for(var i=0; i<count; ++i) {
	// var canvas = $("<canvas>");
	// canvas
	// .attr("height", 100)
	// .attr("width", 100)
	// .css({
	// position: "absolute",
	// opacity: opacity,
	// left: Math.random() * $(window).width() - 100 + "px",
	// top: Math.random() * $(window).height() - 100 + "px"
	// })
	// .appendTo("#mover");
	//
	// var context = canvas[0].getContext('2d');
	// context.beginPath();
	// // ちょっとグリーンぽく
	// context.fillStyle = ["rgb(", 0, ",", getRGB(), ",", getRGB(), ")"].join("");
	// context.arc( 50, 50, 50, 0, Math.PI * 2, false);
	// context.fill();
	// }

	function getColor() {
	return "00" + Math.floor(Math.random() * 0xFFFF).toString(16);
	}
	function getRGB() {
	return Math.floor(Math.random() * 200);
	}

	var firstPointX = [],
	firstPointY = [];

	// offsetの保存
	$("#mover").find(targetElem).each(function(index) {
	var offset = $(this).offset();
	firstPointX[index] = offset.left;
	firstPointY[index] = offset.top;
	});

	$("html")
	.mousemove(function(e) {
	$("#mover").find(targetElem).each(function(index) {
	var elem = $(this),
	offset = elem.offset(),
	theta = Math.atan2(offset.top - e.pageY, offset.left - e.pageX),
	d = 1000 / Math.sqrt(Math.pow(e.pageX - offset.left, 2) + Math.pow(e.pageY - offset.top, 2)),
	left = parseFloat(elem.css("left")) + d * Math.cos(theta) + (firstPointX[index] - offset.left) * 0.1 + "px",
	top = parseFloat(elem.css("top")) + d * Math.cos(theta) + (firstPointY[index] - offset.top) * 0.1 + "px";

	elem.css("left", left);
	elem.css("top", top);
	});
	})
	});
	</script>
	<style type="text/css" media="screen">
	html {
	overflow: hidden;
	}
	.move {
	width: 100px;
	height: 100px;
	border: 1px solid #999;
	position: absolute;
	}
	</style>
	<body>

	<div id="mover">
	</div>

	</body>
	</html>