JavaScript之放大镜效果2

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript之放大镜效果2相关的知识，希望对你有一定的参考价值。

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

我们只需应用一个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="https://image.cha138.com/20210704/8b17510c5cb84caaa1093de05496ec03.jpg"/></a>
<p>单击并且拖动盒子</p>
</td>
<td>自定义缩放窗口</td>
<td id="zoom1-big"></td>
</tr>
</table>
</body>
</html>

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

技术分享

单击并且拖动盒子

 自定义缩放窗口  

以上是关于JavaScript之放大镜效果2的主要内容，如果未能解决你的问题，请参考以下文章

原生JavaScript实例之简单放大镜

小5聊纯javascript实现图片放大镜效果

javascript放大镜效果

JavaScript之图片操作5

前端必学——用JavaScript实现电商图片放大镜效果（附代码）

JS之京东淘宝图片放大镜效果