 
<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、寬和高都超過了，看誰超過的多，誰超的多就將誰設(shè)置為最大值，其余策略按照2、3 
//2、如果寬超過了并且高沒有超，設(shè)置寬為最大值 
//3、如果寬沒超過并且高超過了，設(shè)置高為最大值 

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：

復(fù)制代碼代碼如下:

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

<%--顯示大圖標(biāo)的區(qū)域--%> 
<div id="divImage" style="display: none; left: 120px;top:5px; position: absolute"> 
<img id="imgbig" src="~/Images/noImage.gif" alt="預(yù)覽" /> 
</div> 

您可能感興趣的文章:

相關(guān)文章

在JS中a標(biāo)簽加入單擊事件屏蔽href跳轉(zhuǎn)頁面
這篇文章主要介紹了JS中a標(biāo)簽加入單擊事件屏蔽href跳轉(zhuǎn)頁面的相關(guān)資料,需要的朋友可以參考下
2016-12-12
vue 組件銷毀并重置的實(shí)現(xiàn)
這篇文章主要介紹了vue 組件銷毀并重置的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-01-01
原生js實(shí)現(xiàn)仿window10系統(tǒng)日歷效果的實(shí)例
下面小編就為大家?guī)硪黄鷍s實(shí)現(xiàn)仿window10系統(tǒng)日歷效果的實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-10-10
基于javascript實(shí)現(xiàn)頁面加載loading效果
這篇文章主要為大家詳細(xì)介紹了基于javascript實(shí)現(xiàn)頁面加載loading效果的相關(guān)資料，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-03-03
javascript實(shí)現(xiàn)炫酷的拖動(dòng)分頁
非?？岬膉avascript拖動(dòng)分頁功能，無縫循環(huán)分頁，拖動(dòng)鼠標(biāo)即可完成分頁，鼠標(biāo)向左拖動(dòng)回到前一頁，向右拖動(dòng)則翻開第二頁，還帶有動(dòng)畫特效，著實(shí)很不錯(cuò)，界面黑色，非主流風(fēng)格，相信很多人會(huì)喜歡的。
2015-05-05
javascript不同頁面?zhèn)髦档母倪M(jìn)版
改進(jìn)點(diǎn)：支持同頁面有多個(gè)文本框，可自動(dòng)向不同的文本框傳值。先看演示吧
2008-09-09
JS中的reduce()方法使用小結(jié)
這篇文章主要介紹了JS中的reduce()方法使用小結(jié),文章通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2021-08-08
非常漂亮的js煙花效果
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)非常漂亮的煙花效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-03-03
JavaScript常用的工具函數(shù)分享
這篇文章主要介紹了JavaScript常用的工具函數(shù)分享，JavaScript?是一種具有函數(shù)優(yōu)先的輕量級(jí)，解釋型或即時(shí)編譯型的編程語言，下文詳細(xì)介紹需要的小伙伴可以參考一下
2022-03-03
仿google adsense顏色選擇器代碼，從中易廣告聯(lián)盟程序提取
仿google adsense顏色選擇器代碼，從中易廣告聯(lián)盟程序提取...
2007-11-11