请问用js怎么实现放大镜效果?

放大镜？
代码
http://www.nihilogic.dk/labs/mojozoom/

http://blog.csdn.net/IBM_hoojo/archive/2010/06/24/5691142.aspx插件即可

缩放图片<script language="JavaScript">
var flag=false;
function DrawImage(ImgD,iwidth,iheight){
  var image=new Image();
  image.src=ImgD.src;
  if(image.width>0 && image.height>0){
  flag=true;
  if(image.width/image.height>= iwidth/iheight){
  if(image.width>iwidth){
  ImgD.width=iwidth;
  ImgD.height=(image.height*iwidth)/image.width;
  }else{
  ImgD.width=image.width;
  ImgD.height=image.height;
  }
  ImgD.alt=image.width+"×"+image.height;
  }
  else{
  if(image.height>iheight){
  ImgD.height=iheight;
  ImgD.width=(image.width*iheight)/image.height;
  }else{
  ImgD.width=image.width;
  ImgD.height=image.height;
  }
  ImgD.alt=image.width+"×"+image.height;
  }  }
} －－－－－－－－－放大镜
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Javascript Amplifier</title>
</head>
<body>
<style>
  body{
    margin: 5px;
    padding: 0px;
  }
  #dest{
    width: 384px;
    height: 240px;
    border: solid #ccc 1px;
    overflow: hidden;
    /**这个地方在IE6,7下很贱，如果不把它设置为relative，则在它里面的对象的relative无效**/
    position: relative;
  }

</style>
<p>图片有点大，网速不好的话可能需要几秒钟，你可以把图片test.jpg换成本地图片便于测试</p>
<div id="source" style="width:384px; height:240px; border:solid #ccc 0px;overflow: hidden;font-size:1px;">
  <img src="http://p.blog.csdn.net/images/p_blog_csdn_net/sunxing007/EntryImages/20090511/test.jpg" width=384 height=240 alt="If the picture can't be showed, please change the picture src and press F5."/>
</div>
<div id="dest">
</div>

<script type="text/javascript">
            //辅助函数
          function $(id){
               return document.getElementById(id);
          };
          /**
          * javascript放大镜 v1.0
          * 作者: sunxing007
          * email:[email protected]
          **/
          var Amplifier = {
                    //图片源
                    source: null,
                    //目的地，用来显示放大的效果
                    dest: null,
                    //放大的倍数,
                    scale: 1,
                    //初始化函数
                    init: function(source, dest,scale){
                              this.source = $(source);
                              this.dest = $(dest);
                              this.scale = scale||2;
                              //跟随鼠标移动的红色的框框
                              var borderBox = document.createElement("div");
                              borderBox.style.height = parseInt(this.source.style.height)/scale;
                              borderBox.style.width = parseInt(this.source.style.width)/scale;
                              borderBox.style.border = "solid red 1px";
                              borderBox.style.position = "relative";
                              borderBox.style.top = -parseInt(this.source.style.height);
                              borderBox.style.left =0 //- parseInt(this.source.style.width);
                              this.source.appendChild(borderBox);

                              //放大后的图象
                              var destImg = document.createElement('img');
                              destImg.style.position = "relative";
                              //destImg.height = parseInt(this.source.style.height)*scale + "px";
                              //destImg.width = parseInt(this.source.style.width)*scale + "px";
                              destImg.src = this.source.getElementsByTagName('img')[0].src;
                              this.dest.appendChild(destImg);
                              //图像的高度和宽度倍增，我发现先要执行this.dest.appendChild(destImg);
                              //后再设置height，width才可以生效
                              destImg.height = parseInt(this.source.style.height)*scale;
                              destImg.width = parseInt(this.source.style.width)*scale;
                              //对源图片添加onmousemove事件
                              this.source.onmousemove = function(e){
                                        /**
                                        * 在接下去读之前请先往最后看一下getEvent这个方法，是用来修复IE和firefox下不同的event模型
                                        * 但是我发现我没有做好，在firefox下面表现的有点变态，有firefox经验的人可以修改一下这个方法，
                                        *
                                        * 这里需要解释一下，ie下event.offsetX，offsetY表示鼠标在触发当前事件的元素上偏移的位置,
                                        * 通过改变borderBox.style.left和borderBox.style.top来改变红色的框框在源图中的位置，而且要
                                        * 把红色的框框限制在源图内。
                                        **/
                                        if(Amplifier.getEvent(e).offsetX>parseInt(borderBox.style.width)/2 && (parseInt(this.style.width)- Amplifier.getEvent(e).offsetX)>parseInt(borderBox.style.width)/2){
                                                borderBox.style.left = Amplifier.getEvent(e).offsetX - parseInt(borderBox.style.width)/2;
                                        }
                                        else if(Amplifier.getEvent(e).offsetX<parseInt(borderBox.style.width)/2){
                                                borderBox.style.left = 0;
                                        }
                                        else{
                                                borderBox.style.left = parseInt(this.style.width) - parseInt(borderBox.style.width);
                                        }
                                        //
                                        if(Amplifier.getEvent(e).offsetY>parseInt(borderBox.style.height)/2 && (parseInt(this.style.height)- Amplifier.getEvent(e).offsetY)>parseInt(borderBox.style.height)/2){
                                                borderBox.style.top = -parseInt(this.style.height) + Amplifier.getEvent(e).offsetY - parseInt(borderBox.style.height)/2;
                                        }
                                        else if(Amplifier.getEvent(e).offsetY<parseInt(borderBox.style.height)/2){
                                                borderBox.style.top = -parseInt(this.style.height);
                                        }
                                        else{
                                                borderBox.style.top = -parseInt(borderBox.style.height);
                                        }
                                        //改变图片的style.left,style.top就可以精确控制被放大的部分。
                                        destImg.style.left = -Math.abs(parseInt(borderBox.style.left)*scale);
                                        destImg.style.top = -( parseInt(this.style.height) - Math.abs(parseInt(borderBox.style.top)) )*scale;
                              };
                    },
                    //辅助函数，用来修复ie和ff不同的event模型
                    getEvent: function(e){
                                    if (typeof e == 'undefined'){
                                                e = window.event;
                                    }
                                    //alert(e.x?e.x : e.layerX);
                                    if(typeof e.x == 'undefined'){
                                                ee.offsetX = e.layerX;
                                    }
                                    if(typeof e.y == 'undefined'){
                                                ee.offsetX = e.layerY;
                                    }
                                    return e;
                        }

          };

          //测试代码
          Amplifier.init('source','dest',5);
</script>
</body>
</html>

都没有思路，我也知道思路，关注ing..

调试易

请问用js怎么实现放大镜效果?

解决方案 »