站长论坛

标题: 图片细节放大镜Magic Zoom使用教程 [打印本页]

作者: superadmin    时间: 2010-8-18 14:33
标题: 图片细节放大镜Magic Zoom使用教程
 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>

来自:http://www.3a88.com/service/151.html
官方:http://www.magictoolbox.com




欢迎光临 站长论坛 (http://tzlink.com/bbs/) Powered by Discuz! X3.2