web图片放大镜功能实现与代码。
基本功能是鼠标悬于小图片上的时候,右边能把鼠标位置的图象放大,一般应用于像册是比较酷的功能,当然不仅仅如此,商业中也有很多用到这功能的。一开始我以为能在网上找个现成的,结果花了几小时没有结果,决定自己搞定,然后是花了两天时间研究并二次开发出来的作品,已经算作是接口化了,不过没有去用户体验这块的细节。
上图,大致了解下是什么功能。

在二次开发过程中接触了javascript的Jquery插件,之前一直感觉js框架很不现实,其实是自己没有去接触,接触后还是有不少收获的。这是封建思想在做怪。

代码从这里下载 http://www.zhuoda.org/upload/xiezhi//magnifier-beta2.rar
实现功能的代码:jquery.jqzoom.js
用到的插件:jquery.js
调用方法:index.html


edited on 2008-08-19

今天收到一封邮件,比较意外有人在使用我的程序并且发现了些问题,于是乎决定找些时间好好完善封装一下了。

Mr.孙,你好:
现在关于位置只支持“left"和"right”,不过如果需要使其位置处于下方也很容易。
修改 jquery.jqzoom.js 里面的内容,如下:

-------------------------- step 1 --------------------------------------------------------
查找:
            if(settings.position == "right"){
                leftpos = imageLeft + imageWidth + settings.offset;
            }else{
                leftpos = imageLeft - settings.xzoom - settings.offset;
            }
修改为:
            if (settings.position == "right"){
                leftpos = imageLeft + imageWidth + settings.offset;
                toppos = imageTop;
            } else if (settings.position == "bottom")
                leftpos = imageLeft;
                toppos = imageTop + settings.offset + imageHeight;
            } else {
                leftpos = imageLeft - settings.xzoom - settings.offset;
                toppos = imageTop;
            }

-------------------------- step 2 --------------------------------------------------------
查找:
$("div.zoomdiv").css({"top": imageTop,"left": leftpos ,"width": settings.xzoom,"height": settings.yzoom});
修改为:
$("div.zoomdiv").css({"top": toppos,"left": leftpos ,"width": settings.xzoom,"height": settings.yzoom});


以上步骤我没有严格测试过,不过思路肯定是对的。
谢谢你的使用。程序很简单,花一些时间去学习一下jquery框架就能轻松读懂程序了。

meiking,你好!
有一个问题想请教你,关于调用参数,
修改调用时的参数,如下:
jQuery("#zoom_div").jqueryzoom(
      {
        xzoom: 250,
//宽度
        yzoom: 250,
//高度
        offset: 10,    
//距离实图的距离
        position:
"right"  //位置
      }
    );
  position: "right"  是相对原图的位置,可是我设置
position: "bottom"后不对,放大的图并没有移到图下面,请问这个bug现在有没有修改好?
 

--
姓名: 谢智 住址: 朝阳.北京
Blog: http://www.zhuoda.org/xiezhi/
meiking   2008-05-04 12:59:18 评论:2   阅读:1361   引用:0
无题 @2008-08-08 09:02:55  meiking
修改调用时的参数,如下:
jQuery("#zoom_div").jqueryzoom(
      {
        xzoom: 250,
//宽度
        yzoom: 250,
//高度
        offset: 10,    
//距离实图的距离
        position:
"right"  //位置
      }
    );
无题 @2008-08-08 04:49:31  Hard
我在用你这个代码?挺好的!能不能告诉我,我想显示成大图的两倍,请问是修改哪段代码吗?谢谢

发表评论>>

署名发表(评论可管理,不必输入下面的姓名)

姓名:

主题:

内容: 最少15个,最长1000个字符

验证码: (如不清楚,请刷新)

Copyright@2008 powered by YuLog