js 圖片等比例縮放代碼
更新時(shí)間：2010年05月13日 23:22:48 作者：
js 圖片等比例縮放代碼，需要的朋友可以參考下。
復(fù)制代碼 代碼如下:
var scaleImage = function(o, w, h){
var img = new Image();
img.src = o.src;
if(img.width >0 && img.height>0)
{
if(img.width/img.height >= w/h)
{
if(img.width > w)
{
o.width = w;
o.height = (img.height*w) / img.width;
}
else
{
o.width = img.width;
o.height = img.height;
}
o.alt = img.width + "x" + img.height;
}
else
{
if(img.height > h)
{
o.height = h;
o.width = (img.width * h) / img.height;
}
else
{
o.width = img.width;
o.height = img.height;
}
o.alt = img.width + "x" + img.height;
}
}
}
HTML
復(fù)制代碼 代碼如下:
<div>
<p><img src="../comment/img/max.jpg" onload="scaleImage(this,300,300)" alt="pic" /></p>
<p><img src="../comment/img/2.jpg" onload="scaleImage(this,300,300)" /></p>
<p><img src="../comment/img/3.jpg" onload="scaleImage(this,300,300)" /></p>
<p><img src="../comment/img/4.jpg" onload="scaleImage(this,300,300)" /></p>
</div>
相關(guān)文章
javascript 動(dòng)態(tài)調(diào)整圖片尺寸實(shí)現(xiàn)代碼
在自己的網(wǎng)站上更新文章時(shí)一個(gè)比較常見(jiàn)的問(wèn)題是：文章插圖太寬，使整個(gè)網(wǎng)頁(yè)都變形了。如果對(duì)每個(gè)插圖都先進(jìn)行縮放再插入的話(huà)，太麻煩了。2009-12-12
javascript 鼠標(biāo)懸浮圖片顯示原圖 移出鼠標(biāo)后原圖消失（多圖）
其實(shí)我想實(shí)現(xiàn)的只是大圖預(yù)覽，不需要太復(fù)雜。后來(lái)，在原來(lái)有的javascript資料里找到這個(gè):)“JavaScript網(wǎng)頁(yè)設(shè)計(jì)300例.chm”， 從里面找到了類(lèi)似的下拉菜單的例子修改了一下，以實(shí)現(xiàn)這個(gè)功能。2009-12-12
大家在使用過(guò)程中，可以參考本站的其它一些特效。2008-12-12
兼容ie、firefox的圖片自動(dòng)縮放的css跟js代碼分享
這個(gè)功能主要是解決內(nèi)容頁(yè)中的圖片過(guò)大撐出，導(dǎo)致頁(yè)面比較難看，就需要這樣的代碼，需要的朋友可以參考下2012-01-01
有時(shí)候我們的圖片上傳等功能，需要驗(yàn)證客戶(hù)端的圖片大小，比較只能上傳小于100K的圖片，這里客戶(hù)端先簡(jiǎn)單的驗(yàn)證下。2010-04-04
比較方便的onMouseWheel縮放圖片效果...2006-09-09
多圖展示點(diǎn)擊切換效果模擬的flash效果，點(diǎn)小圖放大顯示，再點(diǎn)恢復(fù)默認(rèn)。
多圖展示點(diǎn)擊切換效果模擬的flash效果，點(diǎn)小圖放大顯示，再點(diǎn)恢復(fù)默認(rèn)。...2006-12-12
javascript動(dòng)態(tài)改變img的src屬性圖片不顯示的解決方法
最近寫(xiě)了幾句javascript程序代碼，涉及到了動(dòng)態(tài)改變圖片的效果，結(jié)果在ie下顯示不出了來(lái)，實(shí)在是郁悶，上網(wǎng)找尋結(jié)果，終于發(fā)現(xiàn)了，原來(lái)是 瀏覽器的問(wèn)題?，F(xiàn)在將方法貼出來(lái)分享。2010-10-10
網(wǎng)頁(yè)特效從下往上過(guò)渡 共享圖庫(kù)_最新圖片
非常不錯(cuò)的應(yīng)用，圖片的輪換效果，用于一些圖片的現(xiàn)實(shí)。2009-04-04
2007-12-12