当鼠标经过图片时，局部放大

希望网页上的图片，当鼠标经过图片时，局部放大。而且这个放大效果在原图的地方，原图的其他位置不变。不知道如何实现/

解决方案 »

  1.   

    <!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>  
        <title>鼠标滑过图片出现大图片提示层</title>  
        <style type="text/css">  
         #demo{overflow:hidden;width:120px;text-align:center;padding:10px;}   
         #demo img{border:none;width:100px;height:100px;border:5px solid #f4f4f4}   
         #bigimage{position:absolute;display:none;z-index:2;border:5px solid #f4f4f4}   
        </style>  
    </head>  
    <body>  
    <div id="demo" style="overflow:hidden;width:120px;text-align:center;padding:10px">  
    <img alt="美女" src="../img/123592LD140-1KT7.jpg" />  
    </div>  
    <div id="bigimage"></div>  
    <script type="text/javascript">  
    var demo = document.getElementById("demo");   
    var gg = demo.getElementsByTagName("img");   
    var ei = document.getElementById("bigimage");   
    for(var i=0; i<gg.length; i++){   
     var ts = gg[i];   
     ts.onmousemove = function(event){   
      eventevent = 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>  
    </body>  
    </html>  
    本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/ws_hgo/archive/2010/01/16/5198209.aspx