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

  不久之前,为了用 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;
}

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

本文已盖 109 层楼

  1. 回复 张三 说:

    老万,你投稿的这篇文章被联盟第一期杂志选中,希望能抽空再校对一下博文,尽量避免错别字及其他。。

  2. 回复 jasmine 说:

    很谢谢你提供的资源啊

  3. 回复 FORECE 说:

    技术啊技术~~这年头只要有技术就可以赚钱。

  4. 回复 softboy 说:

    呵呵,这个免费网站的效果太漂亮了,博主的破解太强大了。谢谢!

  5. 回复 回憶 说:

    這效果真的很不錯! :grin:

  6. 回复 510博客 说:

    特来学习!好东西

  7. 回复 吴熠 说:

    太酷了,把代码复制保存起来备用。

  8. 我代表作者恨你一下。

  9. 回复 chancat 说:

    :lol: 今天我要灌水。。。。

  10. 回复 疾风 说:

    这个图片效果很酷啊~~

  11. 靠,看的我都傻眼 了

  12. 回复 ZNZBLOG 说:

    这个效果我在凡客诚品网站看过

  13. 回复 bolo 说:

    这种效果适合用来做产品介绍

  14. 回复 g 说:

    呵呵,这个摩托很眼熟,我可能看过这个教程。

  15. 回复 smigoo 说:

    不错的效果 来研究下!

  16. 回复 exia 说:

    这样也能做到,的确很强~

  17. 效果很不错啊!!
    可有一点不大理解,干嘛非要用wp来实现网上商城呢?? :cool:

    • 回复 万戈 说:

      因为ecshop这样的网店程序太强大,一些小的产品展示和小型的在线购物商城完全没必要用ecshop,维护起来太困难,还不如用WP,自定义程度也很强大
      当然,只是个人见解,比较喜欢用WP

  18. 这个想法不错~
    值得收藏~

  19. 回复 Gil 说:

    效果杠杠滴 :razz:

  20. 回复 bwskyer 说:

    做商城确实用得道..写博客嘛, 没必要了 :mrgreen:

  21. 回复 卢松松 说:

    原来就是这样 一些服装店用的最多了

  22. 回复 LAONB 说:

    这个效果很棒,产品展示用这个既节省空间,又不影响速度。

  23. 回复 SATURN 说:

    哇,这次好靠前~~~

  24. 回复 Hobo 说:

    效果不错呵呵,类似的效果很多,也有很多写成了jQuery插件

  25. 回复 短歌行 说:

    这车车很漂亮呀。

  26. 回复 胡一刀 说:

    我不是来围观JS,是来围观KTM这辆牛车的~~ :twisted:

  27. 回复 Lc. 说:

    强大哦.. 这个效果不错

  28. 回复 菠萝 说:

    晕,这个功能很强大啊!在咱们普通博客一般用不到,但真的做产品站的话,就很有用了。收藏。

  29. 回复 JuJue 说:

    这个很酷哦, 很有用, 收藏了, 每天来你这儿转转, 肯定有惊喜 :razz:

  30. 回复 星网 说:

    :roll: 舒服!效果真的美话说!

  31. 回复 A.shun 说:

    呀,新蛋就是这种效果。。

    高手

  32. 回复 evlos 说:

    太帅了 收藏 暂时用不上 ~ :twisted:

  33. 回复 小明猪 说:

    发现万戈同学抓出来写的东西都比较有趣呢。。 :idea:

  34. 回复 小明猪 说:

    用了半个月时间,我跟另一个同学写了一个商城~~~哇哈哈~今天下午也把前台搞好了~ :oops: :grin:

  35. 回复 MuMu'S 说:

    真的很酷啊。话说我看大图一点都没有卡。网速好?

  36. 回复 keon 说:

    帅~~~ :oops:
    可惜太帅了~~收藏一个~~

  37. 回复 阿修 说:

    暂时观望~~嘻嘻 :oops:

  38. 回复 老饕 说:

    帅啊!我先下载收藏了!

  39. 回复 JasonChao 说:

    Chrome下貌似没有效果...

  40. 回复 张三 说:

    我靠!很帅诶……可惜俺用不上……

  41. 這個效果做商品展示站確實不錯哈~~

  42. 回复 小y 说:

    难道我是第三位。。
    这个还用不上~~~不过功能很帅~~
    今天更新了两篇日志~娃哈哈

  43. 回复 起衣 说:

    好吧,等到哪天决定折腾JS的时候....恩....

  44. 回复 一米 说:

    好东东,不过博客用不上啊。

Leave a comment

您已输入0

三言两语

我的生活心情语录

工作手札

路漫漫其修远兮

精品推荐

好东西要分享

嘻哈娱乐

八卦趣事一笑而过

电脑网络

全新技术尽搜罗

转来载去

文人墨客美文赏析