AnythingZoomer jQuery Plugin

Posted in 前端开发 on 02/23/2010 09:37:10 | 转载请注明：出自 崔凯的博客

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
效果也不错，有兴趣的去了解一下。原作者提供了视频教程，这就不多阐述了。

相关日志

«

»

6 条评论 《AnythingZoomer jQuery Plugin》

  1. Gravatar匿名
    02/23/2010 at 20:25

    超喜欢，华丽的顶起

    回复

  2. Gravatar皓辰
    02/23/2010 at 21:00

    - 嗯哼，很好玩的功能哦。
    - 先收藏了、

    回复

  3. Gravatar万戈
    02/23/2010 at 21:41

    这个帅，这个帅啊！照片丛中发现两个美女

    回复

  4. Gravatar自由人
    02/24/2010 at 10:31

    很强大啊。。。不过我很少照片的

    回复

  5. Gravatar郭健@go新营销
    03/02/2010 at 13:38

    太帅了！！！！

    回复

  6. Gravatar豬頭六
    04/05/2010 at 23:23

    要相信人的惰性。

    回复

发表评论 （无需注册）

支持CTRL+ENTER快捷提交
崔凯的博客
Powered by WordPress | Theme by ck web design | TOP 顶部
Copyright © 崔凯的博客 All rights reserved. 京ICP备09029324号.