JavaScript之放大镜效果2

在放大图片效果的同时,我们怎么原图和放大窗体增加间隔呢?

我们只需应用一个table就行了:

JavaScript之放大镜效果2

源码上:

<!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>

鼠标单击左键移动查看效果:

JavaScript之放大镜效果2

单击并且拖动盒子

自定义缩放窗口  
上一篇:iOS直播的技术分析与实现


下一篇:【Firefly API 新版文档】Package dbentrust