鼠标经过显示大图的效果

做个页面，需要这么一个功能，就是鼠标经过缩略图的时候同时显示该缩略图的大图，网上搜了一下，垃圾站太多了，所以还是自己写了一个。比较简单，但是还是在这里记录一下，浏览器测试还没做，在Chrome下运行没问题，仅供参考吧。

效果演示

Code

<style type="text/css">
.demo{ overflow:hidden; width:150px; text-align:center; padding:5px;}
.demo img{ border:none; width:130px; border:5px solid #f4f4f4; }
#enlarge_images{ position:absolute; display:none; z-index:2; }
#enlarge_images img{ border:5px solid #f4f4f4; }
</style>

<div id="enlarge_images"><img src=""></div>

<div id="box">
    <div class="demo">
        <img src="../images/1.jpg">
    </div>

    <div class="demo">
        <img src="../images/2.jpg">
    </div>

    <div class="demo">
        <img src="../images/3.jpg">
    </div>

    <div class="demo">
        <img src="../images/4.jpg">
    </div>
</div>

<script type="text/javascript">
var maxsize = 450;	//图片最大尺寸
var obj = document.getElementById("box").getElementsByTagName("img"), j = obj.length;
var bigpic = document.getElementById("enlarge_images");

for(i=0; i<j; i++)
{
    obj[i].onmousemove = function(){
		/*调整图片尺寸start*/
		var thisimg = new Image();
        thisimg.src = this.src;
        var r = thisimg.width/thisimg.height;
        if (r>=1)
		{
			w = maxsize;
			h = maxsize/r;
		}
       	else
		{
			w = maxsize*r;
			h = maxsize;
		}   
        bigpic.getElementsByTagName("img")[0].style.width = w+"px";
        bigpic.getElementsByTagName("img")[0].style.height = h+"px";
		/*调整图片尺寸end*/
        bigpic.style.display = "block";
        bigpic.style.left  = this.offsetWidth + 30 + "px";
        bigpic.style.top = document.body.scrollTop + (event|| window.event).clientY - 340 + "px";
        bigpic.getElementsByTagName("img")[0].src = this.src;
    }

    obj[i].onmouseout = function(){
  		bigpic.style.display = "none";
        bigpic.getElementsByTagName("img")[0].src = "";
    }

    obj[i].onclick = function(){
        window.open( this.src);
    }
}
</script>