在以前的代碼中, 對貼子中超過746像素寬的圖像自動調整為746大小。現在用寬屏顯示器的越來越多,需要將ubbshow.js中的圖像重繪代碼作些修改,使圖像大小隨屏幕大小及不同的css風格自動調整。
該代碼運行的前提是先為headerbg樣式指定個ID名,也就是把header.asp中的class='headerbg'之前加上一句id='headerbg', 這樣后面的代碼就能訪問這個headerbg對象了.
實現該功能需考慮兩個問題, 一個是獲取當前屏幕大小,另一個問題是確認當前采用的什么風格文件, 因為即使屏幕為1024px寬,而風格采用的是極速, 圖片也不能放大到1024寬,那樣就會撐破極速的窗口。
實現的思路如下,為header.asp文件中的headerbg樣式指定個ID,然后在js中讀取該ID樣式中的width值,如width值為具體數字,則直接采用該寬度,如為100%,則取當前屏幕寬度。需要注意的是,讀取的值是字符串,使用前應用parseInt函數將其變為整數。
需要用到的有關函數或方法:
parseInt(); 將括號中的內容轉換為整數型.
getElementById() 獲取ID號對象
.currentStyle.width 對象屬性值
getElementById("對象ID名").currentStyle.width即為對象的當前樣式中的寬度值.
關于屏幕控制的有關屬性:
網頁可見區域寬:document.body.clientWidth
網頁可見區域高:document.body.clientHeight
網頁可見區域寬:document.body.offsetWidth (包括邊線的寬)
網頁可見區域高:document.body.offsetHeight (包括邊線的寬)
網頁正文全文寬:document.body.scrollWidth
網頁正文全文高:document.body.scrollHeight
網頁被卷去的高:document.body.scrollTop
網頁被卷去的左:document.body.scrollLeft
網頁正文部分上:window.screenTop
網頁正文部分左:window.screenLeft
屏幕分辨率的高:window.screen.height
屏幕分辨率的寬:window.screen.width
屏幕可用工作區高度:window.screen.availHeight
屏幕可用工作區寬度:window.screen.availWidth
ubbshow.js中DrawImage過程代碼如下:
function DrawImage(ImgD){
var swidth=document.getElementById("headerbg").currentStyle.width; //獲取headerbg對象的寬度,此寬度就是lbbs頭背景寬度,也就是lbbs的顯示寬度
swidth=parseInt(swidth); //值轉換為整型數字
if(swidth==100) {swidth=document.body.clientWidth;} //對于定義寬度為100%的情況,如w_950.css, 直接取當前屏幕寬度
swidth=swidth-40; //為圖像留白,所以寬度減去一些. 可自行修改
var image=new Image();
image.src=ImgD.src;
if(image.width>0 && image.height>0){
flag=true;
if(image.width>=swidth){
ImgD.width=swidth;
ImgD.height=(image.height*swidth)/image.width;
}else{
ImgD.width=image.width;
ImgD.height=image.height;
}
}
}
img {
height:expression(document.body.clientHeight-50);
}
本站僅提供存儲服務,所有內容均由用戶發布,如發現有害或侵權內容,請
點擊舉報。