js寫的方法實現上傳圖片之後查看大圖

js寫的方法實現上傳圖片之後查看大圖

 用js寫了一個方法，然後在image的onmouseover事件中調用此方法，這樣在滑鼠懸浮在小圖上面的時候，其大圖就會自動的顯示出來

將圖片查詢出來之後，還需要加一個查看大圖的功能，於是就用js寫了一個方法，然後在image的onmouseover事件中調用此方法，這樣在滑鼠懸浮在小圖上面的時候，其大圖就會自動的顯示出來。 

 

顯示大圖和隱藏大圖的js代碼： 

代碼如下:

<script type="text/javascript"> 

//顯示圖片 

function over(imgid,obj,imgbig) 

{ 

//大圖顯示的最大尺寸 4比3的大小 400 300 

maxwidth=400; 

maxheight=300; 

 

//顯示 

obj.style.display=""; 

imgbig.src=imgid.src; 

 

 

//1、寬和高都超過了，看誰超過的多，誰超的多就將誰設定為最大值，其餘策略按照2、3 

//2、如果寬超過了並且高沒有超，設定寬為最大值 

//3、如果寬沒超過並且高超過了，設定高為最大值 

 

if(img.width>maxwidth&&img.height>maxheight) 

{ 

pare=(img.width-maxwidth)-(img.height-maxheight); 

if(pare>=0) 

img.width=maxwidth; 

else 

img.height=maxheight; 

} 

else if(img.width>maxwidth&&img.height<=maxheight) 

{ 

img.width=maxwidth; 

} 

else if(img.width<=maxwidth&&img.height>maxheight) 

{ 

img.height=maxheight; 

} 

} 

 

//隱藏圖片 

function out() 

{ 

document.getElementById('divImage').style.display="none"; 

} 

</script> 

 

顯示小圖的image和顯示大圖的image： 

代碼如下:

<img id="img" src="你的圖片地址" onmouseover="over(img,divImage,imgbig);" onmouseout="out()" width="100" alt="" height="100" /> 

 

<%--顯示大表徵圖的地區--%> 

<div id="divImage" style="display: none; left: 120px;top:5px; position: absolute"> 

<img id="imgbig" src="~/Images/noImage.gif" alt="預覽" /> 

</div>