如何用javascirpt实现的放大镜,图片放大效果，求源代码?

大家帮我想一个如何javascirpt实现的放大镜,鼠标放在图片上面，图片旁边会显示它的放大效果，离开图片，旁边那显示也跟着没有了.

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<title>nothing is impossible</title>
<style type="text/css" media="screen">
* {margin:0;padding:0;}body {font-family:Arial,Helvetica,sans-serif;font-size:12px;}ul {list-style-type:none;}
div {width:200px;height:200px;overflow:hidden;position:relative;}
</style>
</head>
<body><br /><br /><br /><br /><br /><br /><br /><br /><div><img src="http://img.article.pchome.net/00/16/82/55/XXX-2006-12-27-0130.jpg" style="position:relative;" /></div></body>
<script type="text/javascript">
img1=document.createElement('img');
img1.src="http://img.article.pchome.net/00/16/82/55/XXX-2006-12-27-0130.jpg";
document.body.appendChild(img1);
img1.height=document.images[0].height/10;
img1.width=document.images[0].width/10;
img1.onmousemove=function(e) {
var e=e||window.event;
var xPos=e.offsetX||e.pageX-this.offsetLeft;
var yPos=e.offsetY||e.pageY-this.offsetTop;
document.images[0].style.left=-xPos*10+'px';
document.images[0].style.top=-yPos*10+'px';
}
</script>
</html>
photo.js<style type="text/css" media="screen">
div#PreviewBox{
  position:absolute;
  padding-left:6px;
  display: none;
  Z-INDEX:2006;
}
div#PreviewBox span{
  width:7px;
  height:13px;
  position:absolute;
  left:0px;
  top:9px;
  background:url() 0 0 no-repeat;
}
div#PreviewBox div.Picture{
  float:left;
  border:1px #666 solid;
  background:#FFF;
}
div#PreviewBox div.Picture div{
  border:4px #e8e8e8 solid;
}
div#PreviewBox div.Picture div a img{
  margin:19px;
  border:1px #b6b6b6 solid;
  display: block;
  max-height: 250px;
  max-width: 250px;
}
</style>
<script>
var maxWidth=250;
var maxHeight=250;
function getPosXY(a,offset) {
       var p=offset?offset.slice(0):[0,0],tn;
       while(a) {
           tn=a.tagName.toUpperCase();
           if(tn=='IMG') {
              a=a.offsetParent;continue;
           }
          p[0]+=a.offsetLeft-(tn=="DIV"&&a.scrollLeft?a.scrollLeft:0);
          p[1]+=a.offsetTop-(tn=="DIV"&&a.scrollTop?a.scrollTop:0);
          if(tn=="BODY")
                break;
          a=a.offsetParent;
      }
      return p;
}
function checkComplete() {
     if(checkComplete.__img&&checkComplete.__img.complete)
              checkComplete.__onload();
}
checkComplete.__onload=function() {
         clearInterval(checkComplete.__timeId);
         var w=checkComplete.__img.width;
         var h=checkComplete.__img.height;
         if(w>=h&&w>maxWidth) {
              previewImage.style.width=maxWidth+'px';
         }
        else if(h>=w&&h>maxHeight) {
              previewImage.style.height=maxHeight+'px';
        }
        else {
              previewImage.style.width=previewImage.style.height='';
        }
       previewImage.src=checkComplete.__img.src;checkComplete.__img=null;
}
function showPreview(e) {
         hidePreview (e);
         previewFrom=e.target||e.srcElement;
         previewImage.src=loadingImg;
         previewImage.style.width=previewImage.style.height='';
         previewTimeoutId=setTimeout('_showPreview()',500);
         checkComplete.__img=null;
}
function hidePreview(e) {
        if(e) {
            var toElement=e.relatedTarget||e.toElement;
            while(toElement) {
                  if(toElement.id=='PreviewBox')
                          return;
                  toElement=toElement.parentNode;
            }
       }
       try {
            clearInterval(checkComplete.__timeId);
            checkComplete.__img=null;
            previewImage.src=null;
       }
       catch(e) {}
       clearTimeout(previewTimeoutId);
       previewBox.style.display='none';
}
function _showPreview() {
        checkComplete.__img=new Image();
        if(previewFrom.tagName.toUpperCase()=='A')
               previewFrom=previewFrom.getElementsByTagName('img')[0];
        var largeSrc=previewFrom.getAttribute("large-src");
        if(!largeSrc)
             return;
        else {
             checkComplete.__img.src=largeSrc;
             checkComplete.__timeId=setInterval("checkComplete()",20);
             var pos=getPosXY(previewFrom,[106,26]);
             //previewBox.style.left=pos[0]+'px';
             //previewBox.style.top=pos[1]+'px';
previewBox.style.left=400+'px';
previewBox.style.top=200+'px';
             previewBox.style.display='block';
        }
}
</script>
<div id="PreviewBox" onMouseOut="hidePreview(event);">
  <div class="Picture" onMouseOut="hidePreview(event);">
   <span></span>
   <div><img oncontextmenu="return(false)" id="PreviewImage" border="0" onMouseOut="hidePreview(event);" />
   </div>
  </div>
</div>
<script language="javascript" type="text/javascript">
var previewBox = document.getElementById('PreviewBox');
var previewImage = document.getElementById('PreviewImage');
var previewFrom = null;
var previewTimeoutId = null;
var loadingImg = 'norman.jpg';
</script>
调用页<%@LANGUAGE="VBSCRIPT" CODEPAGE="936"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<body>
<img src="图片地址" large-src="图片地址" onmouseover="showPreview(event);" onmouseout="hidePreview(event);" width=100 height=130>
</body>
</html>
<style>
#demo{overflow:hidden;width:120px;text-align:center;padding:10px;}
#demo img{border:none;width:100px;height:100px;border:5px solid #f4f4f4}
#enlarge_images{position:absolute;display:none;z-index:2;border:5px solid #f4f4f4}
</style>
<div id="demo" style="overflow:hidden;width:120px;text-align:center;padding:10px">
<img src="http://avatar.csdn.net/5/5/D/1_smyaqq.jpg">
</div>
<div id="enlarge_images"></div>
<script>
var demo = document.getElementById("demo");
var gg = demo.getElementsByTagName("img");
var ei = document.getElementById("enlarge_images");
for(i=0; i<gg.length; i++){
var ts = gg[i];
ts.onmousemove = function(event){
event = event || window.event;
ei.style.display = "block";
ei.innerHTML = '<img src="' + this.src + '" />';
ei.style.top  = document.body.scrollTop + event.clientY + 10 + "px";
ei.style.left = document.body.scrollLeft + event.clientX + 10 + "px";
}
ts.onmouseout = function(){
ei.innerHTML = "";
ei.style.display = "none";
}
ts.onclick = function(){
window.open( this.src );
}
}
</script>
学习
1楼的放大的够大的，加个onmouseout事件就能满足楼主的需求了img1.onmousemove=function(e) {
    var e=e||window.event;
    var xPos=e.offsetX||e.pageX-this.offsetLeft;
    var yPos=e.offsetY||e.pageY-this.offsetTop;
    document.images[0].style.display = "";
    document.images[0].style.left=-xPos*10+'px';
    document.images[0].style.top=-yPos*10+'px';
}
img1.onmouseout=function(e){
document.images[0].style.display = "none";
}8楼的比较直观些