master

分支 (1)

管理

管理

master

dorado7-icontool
/
index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Mini图标浏览器</title>
<style>
#selectBox {
	width: 20px;
	height: 20px;
	border: 1px solid blue;
	position: absolute;
}

body {
	TEXT-ALIGN: center;
}

#center {
	margin-left: auto;
	margin-right: auto;
}
</style>
<script type="text/javascript">
	function getOffset(evt) {
		var target = evt.target;
		if (target.offsetLeft == undefined) {
			target = target.parentNode;
		}
		var pageCoord = getPageCoord(target);
		var eventCoord = {
			x : window.pageXOffset + evt.clientX,
			y : window.pageYOffset + evt.clientY
		};
		var offset = {
			offsetX : eventCoord.x - pageCoord.x,
			offsetY : eventCoord.y - pageCoord.y
		};
		return offset;
	}

	function getPageCoord(element) {
		var coord = {
			x : 0,
			y : 0
		};
		while (element) {
			coord.x += element.offsetLeft;
			coord.y += element.offsetTop;
			element = element.offsetParent;
		}
		return coord;
	}

	function setIconIndex(event, target) {
		var offset = event;
		if (!offset.offsetX) {
			offset = getOffset(event);
		}
		var offsetX = floorNumber(offset.offsetX, 20);
		var offsetY = floorNumber(offset.offsetY, 20);

		var iconPath = " url(>skin>common/icons.gif) -" + offsetX + "px -"
				+ offsetY + "px";
		document.getElementById(target).value = iconPath;

		if (target == 'selectIcon') {
			var subX = event.clientX - offset.offsetX + offsetX;
			var subY = event.clientY - offset.offsetY + offsetY;
			setDivLocation("selectBox", subX, subY);
		}
	}

	function floorNumber(num, divisor) {
		return Math.floor(num / divisor) * divisor;
	}

	function setDivLocation(id, x, y) {
		var css = document.getElementById(id).style;
		css.left = x + "px";
		css.top = y + "px";
	}
</script>

</head>
<body>
	<div id="center">
		当前选择图标 <br /> <input type="text" id="selectIcon" size="50" /> <br />
		鼠标指向图标 <br /> <input type="text" id="pointIcon" size="50" /> <br />
		<img src="icons.gif" onmousemove="setIconIndex(event, 'pointIcon')"
			onClick="setIconIndex(event, 'selectIcon')" />
	</div>
	<div id="selectBox"></div>
</body>
</html>