把鼠标放在图片上在旁边显示大图

把鼠标放在图片上在旁边显示大图
就好像http://list.paipai.com/list/2001/p-1-40-atime-2001.shtml?ADTAG=301.14.4这样.

解决方案 »

  1.   

    动手去搜 这个非常简单 除了div的位置要特别准确以外
      

  2.   

    //JS部份var zoomHtml="";
    var zoomTime;
    function zoomImg(obj,sortId,img){ 
    if((sortId!="2001") && (sortId!="20501") && (sortId!="21001") && (sortId!="6001")) return;
    var layer = document.getElementById("zoomImg");
    var t=obj.offsetTop;
    var l=obj.offsetLeft;
    while(obj=obj.offsetParent){
    t+=obj.offsetTop;
    l+=obj.offsetLeft;
    }
    layer.style.left =l-210;
    layer.style.top = t-80;
    img="http://image.paipai.com/cgi-bin/showimg?"+img+"&type=3";
    zoomHtml="<table width='200' height='200' border='0' cellpadding='0' cellspacing='0'><tr><td align='center'><img src='"+img+"'></td></tr></table>";
    zoomTime=setTimeout("showZoomImg()",1000);
    } 
    function hideZoomImg(){
    var layer = document.getElementById("zoomImg");
    clearTimeout(zoomTime);
    layer.style.display='none';
    zoomHtml="";
    }
    function showZoomImg(){
    var layer = document.getElementById("zoomImg");
    layer.innerHTML=zoomHtml;
    layer.style.display='';
    }//HTML部份
    <html>
    <head>
    </head>
    <body>
    <DIV id=zoomImg 
    style="BORDER-RIGHT: #b4dcff 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #b4dcff 1px solid; DISPLAY: none; PADDING-LEFT: 5px; Z-INDEX: 20; BACKGROUND: #f4f9ff; PADDING-BOTTOM: 5px; BORDER-LEFT: #b4dcff 1px solid; WIDTH: 200px; CURSOR: hand; PADDING-TOP: 5px; BORDER-BOTTOM: #b4dcff 1px solid; POSITION: absolute; HEIGHT: 200px"></DIV><IMG 
    onmouseover="zoomImg(this,'21001','uin=644917413&amp;filename=2670A8A5-45839A59A5A8702600000000002534BA0077140A.jpg')" 
    onmouseout=hideZoomImg() height=80  width=80 
    border=0>
    </body>
    </html>