圖片自動(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://m.fzitv.net/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://m.fzitv.net/htmldata/2006-01-08/圖片" border=0 width="180" height="110" onload="javascriptrawImage(this);">
width="180" height="110" 注意這里最好限定,如果不限定加載圖時(shí)會(huì)成原大,然后再縮小,這個(gè)過程如果圖大了很難看的.這里是寬度和高度,在前面的JS里改,這里也作相應(yīng)的改.
圖不會(huì)變形,只會(huì)按比列縮,放心
<script language="JavaScript">
<!--
var flag=false;
function DrawImage(ImgD){
var image=new Image();
image.src=http://m.fzitv.net/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://m.fzitv.net/htmldata/2006-01-08/圖片" border=0 width="180" height="110" onload="javascriptrawImage(this);">
width="180" height="110" 注意這里最好限定,如果不限定加載圖時(shí)會(huì)成原大,然后再縮小,這個(gè)過程如果圖大了很難看的.這里是寬度和高度,在前面的JS里改,這里也作相應(yīng)的改.
圖不會(huì)變形,只會(huì)按比列縮,放心
相關(guān)文章
javascript設(shè)計(jì)模式 – 策略模式原理與用法實(shí)例分析
這篇文章主要介紹了javascript設(shè)計(jì)模式 – 策略模式,結(jié)合實(shí)例形式分析了javascript策略模式相關(guān)概念、原理、用法及操作注意事項(xiàng),需要的朋友可以參考下2020-04-04
JavaScript使用箭頭函數(shù)實(shí)現(xiàn)優(yōu)化代碼
在JavaScript的編程世界里,我們時(shí)常被普通函數(shù)的冗長(zhǎng)寫法所困擾,每次都需要寫function關(guān)鍵字,有時(shí)候還要明確地寫return語句,下面我們就來看看如何利用箭頭函數(shù)優(yōu)化這些繁瑣的代碼吧2023-11-11
這篇文章主要給大家介紹了關(guān)于前端大文件分片MinIO上傳的詳細(xì)代碼,Minio支持分片上傳大文件,這個(gè)功能可以讓用戶將大文件劃分成小塊,然后在多個(gè)并行的HTTP請(qǐng)求中上傳這些小塊,從而提高上傳速度和穩(wěn)定性,需要的朋友可以參考下2024-09-09
本章節(jié)討論使用ES6編碼風(fēng)格到代碼中需要注意的點(diǎn)。通過記住這些關(guān)鍵點(diǎn)，可以讓我們寫出更優(yōu)美的、可讀性更強(qiáng)的JavaScript ES6風(fēng)格的代碼。2021-05-05
今天小編就為大家分享一篇layui加載表格,綁定新增,編輯刪除,查看按鈕事件的例子，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-09-09
這篇文章主要為大家詳細(xì)介紹了微信小程序自定義計(jì)時(shí)器功能，設(shè)置一個(gè)時(shí)間，可以開始倒計(jì)時(shí)、暫停，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-09-09
javascript實(shí)現(xiàn)淘寶幻燈片廣告展示效果
這篇文章主要介紹了javascript實(shí)現(xiàn)淘寶幻燈片廣告展示效果的方法,以實(shí)例形式完整講述了javascript實(shí)現(xiàn)幻燈效果的javascript、css及html實(shí)現(xiàn)技巧,需要的朋友可以參考下2015-04-04
JS通用方法觸發(fā)點(diǎn)擊事件代碼實(shí)例
這篇文章主要介紹了JS通用方法觸發(fā)點(diǎn)擊事件代碼實(shí)例,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-02-02
這篇文章主要介紹了Active控件問題小結(jié)(附解決辦法)的相關(guān)資料,非常不錯(cuò)具有參考借鑒價(jià)值，需要的朋友可以參考下2016-06-06
手把手教你搭建ES6的開發(fā)運(yùn)行環(huán)境
如今ES6已經(jīng)發(fā)布了有一段時(shí)間了，很多人學(xué)了ES6但是卻沒運(yùn)行環(huán)境，下面這篇文章主要給大家介紹了關(guān)于搭建ES6運(yùn)行環(huán)境的相關(guān)資料，文中介紹的非常詳細(xì)，對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起看看吧。2017-07-07