您的位置：首页 > 其它

图片细节放大镜Magic Zoom使用教程

2017-09-29 18:44 323 查看

　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"><imgsrc="/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 acaption."><img

src="/upimg/2010/2010421125551904.jpg"/></a></li><li><a
href="/upimg/2010/201042112545461.jpg" class="MagicZoom" title="Hey! This is acaption."
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 yourmessage
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"><imgsrc="/upimg/2010/2010421125551904.jpg"/></a></li><li><a

href="/upimg/2010/201042112545461.jpg"

class="MagicZoom"

rel="smoothing:false"><imgsrc="/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"><imgsrc="/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"><imgsrc="/upimg/2010/2010421125551904.jpg"/></a></li></ol><br><br></body></html>　　运行代码　提示：点击运行代码按钮可看到实际效果

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 放大镜Magic Zoom

相关文章推荐

新的分享

章节导航