鼠标悬停在缩略图上时查看缩放图像

Question

这是用于缩略图上鼠标悬停时的视图缩放图像。它工作!!!

1。代码为html（smarty）

 <{html_image onmouseout="view_zoom(this, '');" onmouseover="view_zoom(this, this.src);" file=$img}>

2。 js的代码：

function view_zoom(o, i)
{
    if(i!=''&&i.indexOf('noimage.jpg') == -1)
    {   
    var s = i.replace('small','big'); 
    var aTag = o;
    var leftpos = toppos = 0;
    do {aTag = aTag.offsetParent; leftpos   += aTag.offsetLeft; toppos += aTag.offsetTop;
    } while(aTag.offsetParent != null);
    var X = o.offsetLeft + leftpos + 100;
    var Y = o.offsetTop + toppos - 20;
    document.getElementById('big_zoom').style.left = X + 'px';
    document.getElementById('big_zoom').style.top = Y + 'px';
    document.getElementById('big_zoom').style.display = 'block';
    document.getElementById('big_zoom').innerHTML='<img src="'+s+'" onload="if(this.width<200) {$(\'big_zoom\').style.display = \'none\');}else if(this.width>300){this.width=300;}$(\'big_zoom\').style.width=this.width+\'px\';"/>'
     } else {
        document.getElementById('big_zoom').style.display = 'none';
    }
  }

第3。 css的代码：

.big_zoom {width:200px;z-index:1000;position:absolute;padding:5px; background:#FFFFFF;}
.big_zoom img{border:#AACCEE 1px solid;padding:5px;}

不要忘记在html中添加这一行

<div class="big_zoom" id="big_zoom" style="display:none;"></div>

大声笑！