AnythingZoomer jQuery Plugin

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

1
2
3
4
5
6
7


<div id="mover">
  <div id="large">
    <p>
      <img src="/a/taobao-demo/b.jpg" alt="big rushmore" />
    </p>
  </div>
</div>

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

言归正传，看一下所引到的代码：

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

对应的html标签：

1
2
3
4
5
6
7


<div id="mover">
  <div id="large">
    <p>
      <img src="b.jpg" alt="big rushmore" />
    </p>
  </div>
</div>

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

Contents