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>
运行代码 提示：点击运行代码按钮可看到实际效果
239
评论
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
