AnythingZoomer jQuery Plugin

AnythingZoomer 是 Chris Coyier 制作的一款基于jQurey的放大镜插件。感觉很有意思。

先来看一下淘宝UED的应用:照片墙下载

small rushmore

big rushmore

因为我的模板也用到了wrap标签,和部分JS同名ID有所冲突,所以代码稍微修改了一下。
这里需要注意的是,不要盲目的使用“批量替换”功能,建议先“批量查找”一下,然后再进行替换。

言归正传,看一下所引到的代码:

  1. <link rel="stylesheet" href="style.css" type="text/css"> 
  2. <script type="text/javascript" src="jquery.js"></script> 
  3. <script type="text/javascript" src="zoomer.js"></script>

这其中,style.css 内的 width: 587px; 和 width: 1300px;定义了缩略图及原图的大小。

对应的html标签:

  1. <div id="main-content1">
  2. <div id="zoomer-wrap">
  3. <div id="small"><img src="s.jpg" alt="small rushmore"></div>
  4. <div id="mover">
  5. <div id="large">
  6. <p><img src="b.jpg" alt="big rushmore"></p></div></div></div>
  7. </div>

类似的“图片缩放类”插件,还被应用于“京东商城”的商品展示,调用的 jQuery Zoom-In
效果也不错,有兴趣的去了解一下。原作者提供了视频教程,这就不多阐述了。

崔凯博客
Powered by WordPress | Theme by ck web design | TOP 顶部
Copyright © 崔凯 All rights reserved. 蜀ICP备12025891号.