指定區(qū)域的圖片自動(dòng)按比例縮小的js代碼（防止頁(yè)面被圖片撐破）
<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)文章
解決Layui中templet中a的onclick參數(shù)傳遞的問題
今天小編就為大家分享一篇解決Layui中templet中a的onclick參數(shù)傳遞的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-09-09
el表達(dá)式 寫入bootstrap表格數(shù)據(jù)頁(yè)面的實(shí)例代碼
這篇文章主要介紹了el表達(dá)式 寫入bootstrap表格數(shù)據(jù)頁(yè)面的實(shí)例代碼，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的的朋友參考下吧2017-01-01
這篇文章主要介紹了前端實(shí)現(xiàn)添加水印功能的四種方法,分別是使用CSS、Canvas、SVG以及動(dòng)態(tài)生成水印圖像,每種方法都有其特點(diǎn)和適用場(chǎng)景,并且每種方法都給出了實(shí)例代碼,需要的朋友可以參考下2025-03-03
原生JS實(shí)現(xiàn)左右箭頭選擇日期實(shí)例代碼
原生JS 左右箭頭選擇日期,就是用左右尖括號(hào)可改變中間日期的值，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下2017-03-03
Bootstrap基本插件學(xué)習(xí)筆記之模態(tài)對(duì)話框(16)
這篇文章主要為大家詳細(xì)介紹了Bootstrap基本插件學(xué)習(xí)筆記之模態(tài)對(duì)話框的相關(guān)資料,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
uniapp改變底部安全區(qū)頂部手機(jī)信號(hào)時(shí)間電池欄顏色樣式
這篇文章主要為大家介紹了uniapp改變底部安全區(qū)頂部手機(jī)信號(hào)時(shí)間電池欄顏色樣式詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
JS實(shí)現(xiàn)audio音頻剪裁剪切復(fù)制播放與上傳(步驟詳解)
這篇文章主要介紹了JS實(shí)現(xiàn)audio音頻剪裁剪切復(fù)制播放與上傳,本文分步驟通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-07-07
zeroclipboard 單個(gè)復(fù)制按鈕和多個(gè)復(fù)制按鈕的實(shí)現(xiàn)方法
最近網(wǎng)站改版想讓復(fù)制代碼功能在多個(gè)瀏覽器上都可以實(shí)現(xiàn)，最近看網(wǎng)上不少說我們的代碼復(fù)制功能不好用的，我們最近將會(huì)增加代碼高亮等功能，希望大家多多支持我們2014-06-06
這篇文章主要介紹了js彈出對(duì)話框方式,結(jié)合大量實(shí)例總結(jié)分析了JavaScript常用的彈出對(duì)話框的實(shí)現(xiàn)技巧與相關(guān)函數(shù)的具體使用方法,需要的朋友可以參考下2015-11-11
這篇文章主要介紹了JavaScript中繼承用法,以實(shí)例形式較為詳細(xì)的分析了javascript實(shí)現(xiàn)繼承的相關(guān)技巧,需要的朋友可以參考下2015-05-05