JS 实现放大镜产品展示效果

发布于：电脑网络 2,262 次践踏
不久之前，为了用 WordPress 打造一个在线购物商城，我用纯 CSS 打造过产品放大展示效果，今天我又挖掘到一个更酷更帅的放大镜展示效果，这是很多购物商城，例如京东商城就在使用的一个产品展示效果。不过这次不是用纯 CSS，而是更着重于使用 JS 来实现这个效果。

还是先看效果吧，将鼠标移至下图即可见放大镜产品展示效果：

这是一个名为 MagicZoom 的免费产品展示效果，官方网站：http://www.magictoolbox.com，其中有更多的产品展示效果，一个比一个炫，大家可以直接去淘淘。但是！下面才是本文要说的重点，请童鞋们注意了，因为 MagicZoom 是免费的，所以在放大的图片中会有如下提示升级文字“Please upgrade to full version of Magic Thumb™”，不用说，这当然很碍眼啦！要去掉这行文字就要付钱咯～再但是！小站可以提供去掉该提示文字的 JS，点此下载 mz-packed.js，将此 JS 代替免费版的 JS 就可以了。

使用这个 JS 的具体方法很简单，如下：

<a href="pic_big.jpg" class="MagicZoom"><img src="pic_small.jpg"/></a>

JS 已经提供下载，CSS 大家可以按照需要自己写，或者直接参考本示例的样式，如下：

/* Copyright 2008 MagicToolBox.com. To use this code on your own site, visit http://magictoolbox.com */
/* CSS class for zoomed area */
.MagicZoomBigImageCont {
    border:1px solid #91b817;
}
.MagicZoomMain {
    text-align:center !important;
    width:92px;
}
.MagicZoomMain div {
    padding: 0px !important;
}
/* Header look and feel CSS class */
/* header is shown if "title" attribute is present in the <A> tag */
.MagicZoomHeader {
    font:10px Tahoma, Verdana, Arial, sans-serif;
    color:#fff;
    background:#91b817;
    text-align:center !important;
}
/* CSS class for small looking glass square under mouse */
.MagicZoomPup {
    border:1px solid #aaa;
    background:#ffffff;
}
/* CSS style for loading animation box */
.MagicZoomLoading {
    text-align:center;
    background:#ffffff;
    color:#444;
    border:1px solid #ccc;
    opacity:0.8;
    padding:3px 3px 3px 3px !important;
    display:none; /* do not edit this line please */
}
/* CSS style for gif image in the loading animation box */
.MagicZoomLoading img {
    padding-top:3px !important;
}

解说完毕，需要的朋友可以尝试下。