📄 19.html

📁 文件是《精通Javascript+jQuery》的书中实例

💻 HTML

字号:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Crop Picture</title>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript" src="19.js"></script>
<link href="19.css" type="text/css" rel="stylesheet" />
</head>

<body>
<div id="statistics">
	size:<span id="showSize"></span>&nbsp;&nbsp;
	x:<span id="xPos"></span>&nbsp;&nbsp;
	y:<span id="yPos"></span>&nbsp;&nbsp;
</div>
<div id="picArea">
	<div id="mypic">
		<img src="01.jpg" border="0" id="mypic1">
		<img src="01.jpg" border="0" id="mypic2">
	</div>
	<div id="selectArea">
		<span id="square0"><img src="dot.gif" border="0" style="cursor:nw-resize;"></span>
		<span id="square1"><img src="dot.gif" border="0" style="cursor:n-resize;"></span>
		<span id="square2"><img src="dot.gif" border="0" style="cursor:ne-resize;"></span>
		<span id="square3"><img src="dot.gif" border="0" style="cursor:w-resize;"></span>
		<span id="square4"><img src="dot.gif" border="0" style="cursor:e-resize;"></span>
		<span id="square5"><img src="dot.gif" border="0" style="cursor:sw-resize;"></span>
		<span id="square6"><img src="dot.gif" border="0" style="cursor:s-resize;"></span>
		<span id="square7"><img src="dot.gif" border="0" style="cursor:se-resize;"></span>
		<span id="square8"><img src="middot.gif" border="0" style="cursor:move;"></span>
		<span id="squareIE"></span>	<!-- 解决IE兼容性问题 -->
	</div>
</div>
</body>
</html>

⌨️ 快捷键说明

复制代码 Ctrl + C

搜索代码 Ctrl + F

全屏模式 F11

切换主题 Ctrl + Shift + D

显示快捷键 ?

增大字号 Ctrl + =

减小字号 Ctrl + -