圖片自動(dòng)縮小的js代碼,用以防止圖片撐破頁(yè)面
更新時(shí)間：2007年03月12日 00:00:00 作者：
JS代碼(隨便放哪里):
<script language="JavaScript">
<!--
var flag=false;
function DrawImage(ImgD){
var image=new Image();
image.src=http://www.dbjr.com.cn/htmldata/2006-01-08/ImgD.src;
if(image.width>0 && image.height>0){
flag=true;
if(image.width/image.height>= 180/110){
if(image.width>180){
ImgD.width=180;
ImgD.height=(image.height*110)/image.width;
}else{
ImgD.width=image.width;
ImgD.height=image.height;
}
/*ImgD.alt="bigpic" */
}
else{
if(image.height>110){
ImgD.height=110;
ImgD.width=(image.width*110)/image.height;
}else{
ImgD.width=image.width;
ImgD.height=image.height;
}
/*ImgD.alt="bigpic" */
}
}
}
//-->
</script>
圖片使用的地方:
<img src="http://www.dbjr.com.cn/htmldata/2006-01-08/圖片" border=0 width="180" height="110" onload="javascriptrawImage(this);">
width="180" height="110" 注意這里最好限定,如果不限定加載圖時(shí)會(huì)成原大,然后再縮小,這個(gè)過(guò)程如果圖大了很難看的.這里是寬度和高度,在前面的JS里改,這里也作相應(yīng)的改.
圖不會(huì)變形,只會(huì)按比列縮,放心
<script language="JavaScript">
<!--
var flag=false;
function DrawImage(ImgD){
var image=new Image();
image.src=http://www.dbjr.com.cn/htmldata/2006-01-08/ImgD.src;
if(image.width>0 && image.height>0){
flag=true;
if(image.width/image.height>= 180/110){
if(image.width>180){
ImgD.width=180;
ImgD.height=(image.height*110)/image.width;
}else{
ImgD.width=image.width;
ImgD.height=image.height;
}
/*ImgD.alt="bigpic" */
}
else{
if(image.height>110){
ImgD.height=110;
ImgD.width=(image.width*110)/image.height;
}else{
ImgD.width=image.width;
ImgD.height=image.height;
}
/*ImgD.alt="bigpic" */
}
}
}
//-->
</script>
圖片使用的地方:
<img src="http://www.dbjr.com.cn/htmldata/2006-01-08/圖片" border=0 width="180" height="110" onload="javascriptrawImage(this);">
width="180" height="110" 注意這里最好限定,如果不限定加載圖時(shí)會(huì)成原大,然后再縮小,這個(gè)過(guò)程如果圖大了很難看的.這里是寬度和高度,在前面的JS里改,這里也作相應(yīng)的改.
圖不會(huì)變形,只會(huì)按比列縮,放心
相關(guān)文章
JavaScript判斷表單提交時(shí)哪個(gè)radio按鈕被選中的方法
這篇文章主要介紹了JavaScript判斷表單提交時(shí)哪個(gè)radio按鈕被選中的方法,實(shí)例分析了javascript操作表單radio按鈕的技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-03-03
這篇文章主要介紹了CocosCreator新資源管理系統(tǒng)，從v2.4開始，Creator使用AssetBundle完全重構(gòu)了資源底層，提供了更加靈活強(qiáng)大的資源管理方式，也解決了之前版本資源管理的痛點(diǎn)（資源依賴與引用），本文將帶你深入了解Creator的新資源底層。2021-04-04
JavaScript基礎(chǔ)之文件上傳與下載的實(shí)現(xiàn)詳解
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)文件上傳與下載功能的相關(guān)資料，文中的示例代碼講解詳細(xì)，具有一定的借鑒價(jià)值，感興趣的小伙伴可以學(xué)習(xí)一下2023-01-01
es6中Promise 對(duì)象基本功能與用法實(shí)例分析
這篇文章主要介紹了es6中Promise 對(duì)象基本功能與用法,結(jié)合實(shí)例形式分析了es6中Promise對(duì)象的基本功能、用法及操作注意事項(xiàng),需要的朋友可以參考下2020-02-02
拖拽是前端實(shí)現(xiàn)中比較常用的一種效果, HTML5 提供了較為強(qiáng)大的拖拽 API 支持,今天我們來(lái)實(shí)現(xiàn)一個(gè)簡(jiǎn)單的拖拽效果,需要的朋友可以參考下2023-09-09
預(yù)防網(wǎng)頁(yè)掛馬的方法總結(jié)
這篇文章主要介紹了預(yù)防網(wǎng)頁(yè)掛馬的方法總結(jié)的相關(guān)資料,這里詳細(xì)整理了具體方法，和如何實(shí)現(xiàn)，需要的朋友可以參考下2016-11-11
JavaScript isArray()函數(shù)判斷對(duì)象類型的種種方法
我們知道，JavaScript中檢測(cè)對(duì)象類型的運(yùn)算符有：typeof、instanceof，還有對(duì)象的constructor屬性2010-10-10
ES6中的Promise對(duì)象與async和await方法詳解
Promise是es6引入的異步編程薪解決方案，語(yǔ)法上promise就是一個(gè)構(gòu)造函數(shù)，用來(lái)封裝異步操作病可以獲取其成功或失敗的結(jié)果，這篇文章主要介紹了ES6中的Promise對(duì)象與async和await方法,需要的朋友可以參考下2022-12-12
這篇文章對(duì)js編寫等方便詳細(xì)的說(shuō)明了幾個(gè)技巧，方便大家提高效率，學(xué)習(xí)簡(jiǎn)易化書寫代碼2013-03-03
Bootstrap每天必學(xué)之按鈕（Button）插件
Bootstrap每天必學(xué)之按鈕（Button）插件,通過(guò)按鈕（Button）插件，您可以添加進(jìn)一些交互，比如控制按鈕狀態(tài)，或者為其他組件（如工具欄）創(chuàng)建按鈕組，感興趣的小伙伴們可以參考一下2016-04-04