做一個滑鼠移入顯示大圖的效果

做個頁面，需要這麼一個功能，就是滑鼠經過縮圖的時候同時顯示該縮圖的大圖，網上搜了一下，垃圾站太多了，所以還是自己寫了一個。比較簡單，但是還是在這裡記錄一下，瀏覽器測試還沒做，在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>