【转载】js实现产品放大镜展示效果

2019独角兽企业重金招聘Python工程师标准>>>

这是一个名为 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;
}

　　

转载于:https://my.oschina.net/weisenz/blog/200638