指定區(qū)域的圖片自動(dòng)按比例縮小的js代碼（防止頁面被圖片撐破）
<div id=article><img height="800" alt="" width="1280" src="/down/js/images/12498880470.jpg" /></div>
<script type="text/javascript" >
//縮放圖片到合適大小
function ResizeImages()
{
var myimg,oldwidth,oldheight;
var maxwidth=550;
var maxheight=880
var imgs = document.getElementById('article').getElementsByTagName('img'); //如果你定義的id不是article，請(qǐng)修改此處
for(i=0;i<imgs.length;i++){
myimg = imgs[i];
if(myimg.width > myimg.height)
{
if(myimg.width > maxwidth)
{
oldwidth = myimg.width;
myimg.height = myimg.height * (maxwidth/oldwidth);
myimg.width = maxwidth;
}
}else{
if(myimg.height > maxheight)
{
oldheight = myimg.height;
myimg.width = myimg.width * (maxheight/oldheight);
myimg.height = maxheight;
}
}
}
}
//縮放圖片到合適大小
ResizeImages();
</script>
意思就是控制指定區(qū)域的的圖片大小，要不一些大點(diǎn)的廣告圖片也會(huì)變形。
腳本之家用的圖片控制代碼：
function controlImg(ele,w,h){
var c=ele.getElementsByTagName("img");
for(var i=0;i<c.length;i++){
var w0=c[i].clientWidth,h0=c[i].clientHeight;
var t1=w0/w,t2=h0/h;
if(t1>1||t2>1||w0>=600){
c[i].width=Math.floor(w0/(t1>t2?t1:t2));
c[i].height=Math.floor(h0/(t1>t2?t1:t2));
if(document.all){
c[i].outerHTML='<a href="'+c[i].src+'" target="_blank" title="在新窗口查看圖片">'+c[i].outerHTML+'</a>'
}
else{
c[i].title="在新窗口打開圖片";
c[i].onclick=function(e){window.open(this.src)}
}
}
}
}
ele就是指定的區(qū)域，w是最大的寬度，大于這個(gè)就會(huì)縮小。h是最大的高度。
相關(guān)文章
小程序?qū)崿F(xiàn)計(jì)時(shí)器小功能
這篇文章主要為大家詳細(xì)介紹了小程序?qū)崿F(xiàn)計(jì)時(shí)器小功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-09-09
如何用JS播放wav文件，理論上用js在網(wǎng)頁里嵌入一個(gè)window播放器的插件,可以播放的。,不過通用性不是很好,IE下可以用，感興趣的朋友可以參考下哈本文2013-04-04
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)雪花飄落效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-12-12
Django1.7+JQuery+Ajax驗(yàn)證用戶注冊(cè)集成小例子
下面是散仙使用Django+Jquery+Ajax的方式來模擬實(shí)現(xiàn)了一個(gè)驗(yàn)證用戶注冊(cè)時(shí)，用戶名存在不存在的一個(gè)小應(yīng)用。注意，驗(yàn)證存在不存在使用的是Ajax的方式，不用讓用戶點(diǎn)擊按鈕驗(yàn)證是否存在,需要的朋友可以參考下2017-04-04
Javascript實(shí)現(xiàn)的CSS代碼高亮顯示
到網(wǎng)上一位別出心裁的高手使用字符串而不是正則表達(dá)式實(shí)現(xiàn)了Javascript代碼高亮顯示，自己受益匪淺，于是就構(gòu)思了CSS代碼的高亮顯示。2009-11-11
javascript實(shí)現(xiàn)10個(gè)球隨機(jī)運(yùn)動(dòng)、碰撞實(shí)例詳解
這篇文章主要介紹了javascript實(shí)現(xiàn)10個(gè)球隨機(jī)運(yùn)動(dòng)、碰撞的方法,實(shí)例分析了javascript實(shí)現(xiàn)小球碰撞的原理與實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-07-07
Js逆向?qū)崿F(xiàn)滑動(dòng)驗(yàn)證碼圖片還原的示例代碼
這篇文章主要介紹了Js逆向?qū)崿F(xiàn)滑動(dòng)驗(yàn)證碼圖片還原的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03
學(xué)習(xí)JavaScript設(shè)計(jì)模式(策略模式)
這篇文章主要帶領(lǐng)大家學(xué)習(xí)JavaScript設(shè)計(jì)模式，其中重點(diǎn)介紹策略模式，以年終獎(jiǎng)為實(shí)例對(duì)策略模式進(jìn)行分析，對(duì)策略模式進(jìn)行詳細(xì)剖析，感興趣的小伙伴們可以參考一下2015-11-11
this是JavaScript中的關(guān)鍵字之一，在編寫程序的時(shí)候經(jīng)常會(huì)用到，正確的理解和使用關(guān)鍵字this尤為重要。接下來通過本文給大家介紹javascript中的this，需要的朋友參考下吧2016-02-02
JavaScript數(shù)據(jù)結(jié)構(gòu)與算法之二叉樹實(shí)現(xiàn)查找最小值、最大值、給定值算法示例
這篇文章主要介紹了JavaScript數(shù)據(jù)結(jié)構(gòu)與算法之二叉樹實(shí)現(xiàn)查找最小值、最大值、給定值算法,涉及javascript二叉樹定義、賦值、遍歷、查找等相關(guān)操作技巧,需要的朋友可以參考下2019-03-03