在放大图片效果的同时，我们怎么原图和放大窗体增加间隔呢？
我们只需应用一个table就行了：
源码上：
<!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">
<meta http-equiv="imagetoolbar" content="no" />
<link rel="stylesheet" href="http://files.cnblogs.com/files/caidupingblogs/MagicZoom.css" type="text/css" media="screen" />
<script src="http://files.cnblogs.com/files/caidupingblogs/mz-packed.js" type="text/javascript"></script>
<style>
img {
border-width: 0px;
}
body, p {
font-size: 12px;
}
</style>
<title>JavaScript之放大镜效果</title>
</head>
<body>
<table border="0">
<tr>
<td>
<a href="http://images.cnblogs.com/cnblogs_com/caidupingblogs/828701/o_03.jpg" id="zoom1" rel="drag-mode: true; always-show-zoom: true; zoom-position: custom" title="MagicZoom: Super bike" class="MagicZoom"><img src="//bbsmax.ikafan.com/static/L3Byb3h5L2h0dHAvaW1hZ2VzLmNuYmxvZ3MuY29tL2NuYmxvZ3NfY29tL2NhaWR1cGluZ2Jsb2dzLzgyODcwMS90XzAzLmpwZw==.jpg"/></a>
<p>单击并且拖动盒子</p>
</td>
<td>自定义缩放窗口</td>
<td id="zoom1-big"></td>
</tr>
</table>
</body>
</html>
鼠标单击左键移动查看效果：
|
单击并且拖动盒子 |
自定义缩放窗口 |