图片细节放大镜Magic Zoom使用教程| 金飞科技[3A88.COM]

　　Magic Zoom 是非常好用的图片放大镜组件，非常的好用，可以任意的定义放大镜的尺寸，放大镜的显示位置，可以定义图片标题，甚至滤镜的透明度均可定义，设置参数相当丰富，可以根据自己要求DIY出不同的效果。这个组件兼容IE6以上和Firefox，使用非常简单。

　　主要使用场合：一些网络店铺，需要对商品细节进行更细化，让用户更了解。在线照片，让浏览者更能看清一些细节。下面的代码可以直接使用在你的网站中。希望对您能有所帮助。

　　1、在网页头部<head>部分加入以下代码：

<link rel="stylesheet" href="magiczoom.css" type="text/css" />
<script src="magiczoom.js" type="text/javascript"></script>

　　2、在图片显示的位置加入class="MagicZoom"，如下所示：

<a href="big.jpg" class="MagicZoom"><img src="small.jpg"/></a>

　　更详细的参数设置可以参见官方网站：http://www.magictoolbox.com/magiczoom_integration/

　　免费版有字样提示，并且一些内容是加密的，下面介绍一下修改的方法(提醒：此方只用于学习，如果用于商业用途，请使用正版)

　　a、找到magiczoom.js最后1个括号“)”；
　　b、在那个括号“)”前插入：

.replace("this.innerHTML=d","this.innerHTML=''")

下面给出演示源码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>图片细节放大镜Magic Zoom使用教程</title>
    <meta http-equiv="imagetoolbar" content="no" />
    <link rel="stylesheet" href="/upimg/files/MagicZoom.css" type="text/css"

media="screen" />
    <script src="/upimg/files/magiczoom.js" type="text/javascript"></script>
    <style>
 img {
  border-width: 0px;
 }
 </style>
</head>
<body>
<ol>
<li><a href="/upimg/2010/201042112545461.jpg" class="MagicZoom" rel="zoom-position:

bottom"><img src="/upimg/2010/2010421125551904.jpg"/></a></li>
<li><a href="/upimg/2010/201042112545461.jpg" class="MagicZoom" rel="zoom-distance:5"><img

src="/upimg/2010/2010421125551904.jpg"/></a></li>
<li><a href="/upimg/2010/201042112545461.jpg" class="MagicZoom" rel="zoom-position:

inner"><img src="/upimg/2010/2010421125551904.jpg"/></a></li>
<li><a href="/upimg/2010/201042112545461.jpg" class="MagicZoom" id="elephant" rel="zoom-

position: custom"><img src="/upimg/2010/2010421125551904.jpg"/></a><div id="elephant-

big"></div></li>
<li><a href="/upimg/2010/201042112545461.jpg" class="MagicZoom" rel="zoom-width:400px;

zoom-height:200px"><img src="/upimg/2010/2010421125551904.jpg"/></a></li>
<li><a href="/upimg/2010/201042112545461.jpg" class="MagicZoom" title="Hey! This is a

caption."><img src="/upimg/2010/2010421125551904.jpg"/></a></li>
<li><a href="/upimg/2010/201042112545461.jpg" class="MagicZoom" title="Hey! This is a

caption." rel="show-title:false"><img src="/upimg/2010/2010421125551904.jpg"/></a></li>
<li><a href="/upimg/2010/201042112545461.jpg" class="MagicZoom" rel="loading-msg:Put your

message here!"><img src="/upimg/2010/2010421125551904.jpg"/></a></li>
<li><a href="/upimg/2010/201042112545461.jpg" class="MagicZoom" rel="show-

loading:false"><img src="/upimg/2010/2010421125551904.jpg"/></a></li>
<li><a href="/upimg/2010/201042112545461.jpg" class="MagicZoom" rel="loading-opacity:50;

loading-position-x:150; loading-position-y:20"><img

src="/upimg/2010/2010421125551904.jpg"/></a></li>
<li><a href="/upimg/2010/201042112545461.jpg" class="MagicZoom" rel="smoothing:false"><img

src="/upimg/2010/2010421125551904.jpg"/></a></li>
<li><a href="/upimg/2010/201042112545461.jpg" class="MagicZoom" rel="zoom-fade:true; zoom

-fade-in-speed:800; zoom-fade-out-speed:400"><img

src="/upimg/2010/2010421125551904.jpg"/></a></li>
<li><a href="/upimg/2010/201042112545461.jpg" class="MagicZoom" rel="click-to-

initialize:true"><img src="/upimg/2010/2010421125551904.jpg"/></a></li>
<li><a href="/upimg/2010/201042112545461.jpg" class="MagicZoom" rel="click-to-

activate:true"><img src="/upimg/2010/2010421125551904.jpg"/></a></li>
<li><a href="/upimg/2010/201042112545461.jpg" class="MagicZoom" rel="entire-

image:true"><img src="/upimg/2010/2010421125551904.jpg"/></a></li>
<li><a href="/upimg/2010/201042112545461.jpg" class="MagicZoom" rel="fps:35"><img

src="/upimg/2010/2010421125551904.jpg"/></a></li>
</ol>
<br><br>

</body>
</html>

　　　提示：点击运行代码按钮可看到实际效果

更新时间：2010-4-21