放大镜

<!--function MagnifyingGlass(id, w, h, c) { // 建立放大镜。id：放大镜的id；w、h：放大镜的宽度、高度；bc：放大镜的背景色，建议设成和网页背景色相同      this.name = id;      var ss = "";
      ss += "<img id='" + this.name + "' src='magnifyingGlass.gif' border=1 width="+w+" height="+h+" title='放大镜\n点击鼠标则关闭放大镜'"
          + " onclick=\"this.close();\""
          + " oncontextmenu=\"this.close();return false;\""
          + " onmousemove='this.move()'"
          + " style='cursor:crosshair;background-color:" + c + ";display:none;position:absolute;"
          + "background-repeat:no-repeat;background-position:2000 2000;"
          + "'>";
      document.writeln(ss);      this.Glass  = eval("document.all." + this.name);
      this.Glass.isMagnifying = false;
      this.Glass.smallImg = null;
      this.Glass.smallImgLeft = 0;
      this.Glass.smallImgTop = 0;
      this.Glass.smallImgWidth = 0;
      this.Glass.smallImgHeight = 0;
      this.Glass.bigImg = new Image();
      this.Glass.bigImgWidth = 0;
      this.Glass.bigImgHeight = 0;      this.Glass.close = function() {     // 关闭放大镜
            this.isMagnifying = false;
            this.style.display='none';
      }      this.Glass.show = function(obj) {    // 显示放大镜
            this.smallImg = obj;
            this.smallImgLeft = parseInt(event.x, 10) - parseInt(event.offsetX, 10);
            this.smallImgTop = parseInt(event.y, 10) - parseInt(event.offsetY, 10);
            this.smallImgWidth = parseInt(this.smallImg.offsetWidth, 10);
            this.smallImgHeight = parseInt(this.smallImg.offsetHeight, 10);
            this.bigImg.src = obj.src;
            this.bigImgWidth  = parseInt(this.bigImg.width, 10);
            this.bigImgHeight = parseInt(this.bigImg.height,10);
            this.style.backgroundImage = "url(" + obj.src + ")";
            this.isMagnifying = true;
            this.style.display='block';
      }      this.Glass.move = function() {      // 移动放大镜
            if (this.isMagnifying) {
                  this.style.left = event.x + parseInt(document.body.scrollLeft) - parseInt(this.width)  / 2;
                  this.style.top  = event.y + parseInt(document.body.scrollTop)  - parseInt(this.height) / 2;
                  var bgx = (-1) * (this.bigImgWidth  / this.smallImgWidth - 1)
                                 * (event.x - this.smallImgLeft + parseInt(document.body.scrollLeft, 0))
                                 - parseInt(this.style.left, 10) + this.smallImgLeft;
                  var bgy = (-1) * (this.bigImgHeight / this.smallImgHeight - 1)
                                 * (event.y - this.smallImgTop + parseInt(document.body.scrollTop, 10))
                                 - parseInt(this.style.top, 10) + this.smallImgTop;
                  this.style.backgroundPosition = bgx + " " + bgy;
            }
      }      return this;
}//-->

解决方案 »

  1.   

    使用另一种放大镜的例子见下。其中的magnifyingGlass2.js内容见后。================================
    <html>
    <head>
    <meta http-equiv='Content-Type' content='text/html; charset=gb2312'>
    <meta HTTP-EQUIV="imagetoolbar" CONTENT="no">
    <title>测试放大镜</title>
    </head>
    <body style="margin:0px">
    <center>
    <script language=javascript src="magnifyingGlass2.js"></script>
    <script language=javascript>
    <!--
    /*---------------------- 说明 -----------------------   建立放大镜：new MagnifyingGlass(id, l, t, w, h, b, c, isBigSize);
             其中：
                 id       ：放大镜的id；（其中大镜的是id1、小镜的是id2）
                 l、t     ：大镜的左上角距左、距顶的位置；
                 w、h     ：宽度、高度；
                 isBigSize：上述尺寸是大镜的还是小镜的(缺省是大镜的)
                 c        ：大镜的背景色，建议设成和网页背景色相同
                 b        ：大、小镜的边线宽度(缺省1)------------------------------------------------------------*///var myMagnifyingGlass = new MagnifyingGlass("myMagnifyingGlassID", 30, 80, 150, 150);    // 建立放大镜（大镜尺寸固定）
    var myMagnifyingGlass = new MagnifyingGlass("myMagnifyingGlassID",100,400,30,30,1,"",false); // 建立放大镜（小镜尺寸固定）function outImage(id, mapFile, sw, sh) {     // id：小图的id；mapFile：大图文件名；sw：小图宽度；sh：小图高度；      var myImg = new Image();
          myImg.src = mapFile;
          var w = sw;
          var h = myImg.height * sw / myImg.width;
          if (h > sh) {
                h = sh;
                w = myImg.width * sh / myImg.height;
          }
          var ss = "<img id='" + id + "' src='" + mapFile + "' width=" + w + " height=" + h
                 + " oncontextmenu=\"myMagnifyingGlass.reset(this); return false;\""
                 + " onclick=\"window.open('" + mapFile + "', '');\""
                 + " title='小图\n按鼠标左键则看大图；\n按鼠标右键则用放大镜。'>";
          document.writeln(ss);
    }document.writeln("<br><br><br><br><br>");
    outImage("smallImage1", "images/bigImage1.JPG", 150, 100);
    document.writeln("<br><br><br><br><br>");
    outImage("smallImage2", "images/bigImage2.JPG", 80, 60);
    //-->
    </script>
    </center>
    </body>
    </html>