鼠标移到小图上显示大图

鼠标移到小图上显示大图

1 列表中显示的小图
 <img src='<%# SitePicUrl+ DataBinder.Eval(Container.DataItem, "Fieldphoto").ToString()%>' height="30px" width="50px" alt="外景小图" οnmοuseοver="ShowImage(event)" οnmοuseοut="HideImage(event)" />

2 在</body>前放置一个div,也可动态创建
<div id="ShowPicBox" class="spicDiv"><img alt="" id="ShowPic" src="" height="1px" width="1px" /></div>

3 显示及隐藏的js
<script type="text/javascript">
    var oEvent = null, oElement = null;
    function ShowImage(evt) {//显示图片用的方法
        evt = (evt) ? evt : ((window.event) ? window.event : "")
        var elem = null;
        if (evt) {
            elem = (evt.target) ? evt.target : evt.srcElement
        } //这里本来是想做ＦＦ兼容的，可是当时能力有限没有做出来．
        var ee = elem;
        var ex = ee.offsetLeft, ey = ee.offsetTop;
        while (ee = ee.offsetParent) {
            ex += ee.offsetLeft;
            ey += ee.offsetTop;
        }
        checkComplete.__img = new Image();
        checkComplete.__img.src = elem.src;
        //这里给显示的层做定位
        ShowPicBox.style.position = "absolute";
        //ShowPicBox.style.left = ex + elem.offsetWidth + "px";

        ShowPicBox.style.right =  elem.offsetWidth + 155 + "px";
        ShowPicBox.style.top = ey  + "px";
        ShowPicBox.style.display = "";
       
        checkComplete.__timeId = setInterval("checkComplete();", 20);
        elem.detachEvent("onmouseover", ShowImage);
    }

    function checkComplete()//这个方法在这里检查大图是不是被加载完毕
    {
        if (checkComplete.__img && checkComplete.__img.complete)
            checkComplete.__onload();
        clearInterval(checkComplete.__timeId);
    }
    var curx = 2000; cury = 1500;
    checkComplete.__onload = function() {
        clearInterval(checkComplete.__timeId);
        var w = checkComplete.__img.width;
        var h = checkComplete.__img.height;
        //如果图片太大则按比例缩放保持图片不失真，大小在上面的curx,cury设置
        var x = 0, y = 0;
        x = w / curx;
        y = h / cury;

        var m = 0, n = 0;
        if (x > 1 || y > 1) {
            m = w / Math.max(x, y);
            n = h / Math.max(x, y);
        }
        else {
            m = w;
            n = h;
        }
        ShowPic.src = checkComplete.__img.src;
        ShowPic.width = m;
        ShowPic.height = n;
        checkComplete.__img = null;
    }

    function HideImage(evt) {//隐藏图片
        evt = (evt) ? evt : ((window.event) ? window.event : "")
        var elem = null;
        if (evt) {
            elem = (evt.target) ? evt.target : evt.srcElement
        }
        elem.attachEvent("onmouseover", ShowImage);
        clearInterval(checkComplete.__timeId);
        ShowPicBox.style.display = "none";
        ShowPic.width = "1px";
        ShowPic.height = "1px";
        ShowPic.src = "";
    }
</script>