 
<style> 
body{margin:0; padding:0;height:2000px; } 
#background_img{ 
top:expression(documentElement.scrollTop); /*we need this expression to fixed the top*/ 
} 
</style> 

復(fù)制代碼代碼如下:

 
/** 
*@desc make a fixed background image. resize the image to fit the window size besides do not lost the image's proportion 
*@author EI Nino 
*2013/8/15 
*/ 
var imgBackground=function(_img_obj) 
{ 
this.img = _img_obj; 
this.init(); 
} 
imgBackground.prototype={ 
init:function(){ 
this.img.style.top="0"; 
this.img.style.left="0"; 
if(navigator.appVersion.indexOf('MSIE 6.0')>0){ 
this.img.style.position="absolute"; 
this.img.style.bottom="auto"; 
if(!document.body.style.backgroundImage){//esacpe the flash when scroll the window in IE 6 
document.body.style.backgroundImage="url(about:blank)"; 
document.body.style.backgroundAttachment="fixed"; 
} 
} 
else{ 
this.img.style.position="fixed"; 
} 
this.ra = this.img.width/this.img.height; 
this.resize(); 
this.BindEvent(); 
}, 
resize:function() { 
var self=this; 
if((document.documentElement.clientWidth /document.documentElement.clientHeight )>=self.ra) 
{ 
self.img.style.width=document.documentElement.clientWidth+"px"; 
self.img.style.height=""; 
} 
else{ 
self.img.style.width=""; 
self.img.style.height=document.documentElement.clientHeight +"px"; 
} 
}, 
GetStyle:function(_obj,_style){ 
var obj = _obj; 
return obj.currentStyle? obj.currentStyle[_style] :window.getComputedStyle(obj, null)[_style]; 
}, 
BindEvent:function(){ 
var self = this; 
$(window).resize(function(){//use jquery lib 
self.resize(); 
}); 
} 
}; 
new imgBackground(document.getElementById("background_img")); 

相關(guān)文章

微信小程序8種數(shù)據(jù)通信的方式小結(jié)
這篇文章主要介紹了微信小程序8種數(shù)據(jù)通信的方式小結(jié)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-02-02
webpack4 處理SCSS的方法示例
這篇文章主要介紹了webpack4處理SCSS的方法示例,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-09-09
滾動(dòng)條的監(jiān)聽與內(nèi)容隨著滾動(dòng)條動(dòng)態(tài)加載的實(shí)現(xiàn)
下面小編就為大家?guī)硪黄獫L動(dòng)條的監(jiān)聽與內(nèi)容隨著滾動(dòng)條動(dòng)態(tài)加載的實(shí)現(xiàn)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-02-02
JS模擬實(shí)現(xiàn)Select效果代碼
這篇文章主要介紹了JS模擬實(shí)現(xiàn)Select效果代碼,涉及JavaScript基于鼠標(biāo)點(diǎn)擊事件動(dòng)態(tài)操作頁面元素實(shí)現(xiàn)Select效果的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-09-09
JavaScript實(shí)現(xiàn)的微信二維碼圖片生成器的示例
二維碼分享功能大多是由后端實(shí)現(xiàn)的,對服務(wù)器的負(fù)載較重,這里有一個(gè)前端實(shí)現(xiàn)的版本，本文介紹了JavaScript實(shí)現(xiàn)的微信二維碼圖片生成器的示例，有需要的可以了解一下。
2016-10-10
Javascript淺析執(zhí)行機(jī)制的詳情
這篇文章主要介紹了JavaScript執(zhí)行機(jī)制，想要搞懂JavaScript執(zhí)行機(jī)制，便與進(jìn)程與線程的概念脫不了干系，下面我們就來看看這JavaScript執(zhí)行機(jī)制的具體介紹吧,需要的朋友可以參考一下
2022-08-08
微信小程序?qū)崿F(xiàn)滑動(dòng)側(cè)邊欄
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)滑動(dòng)側(cè)邊欄，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-07-07
微信小程序自定義導(dǎo)航教程（兼容各種手機(jī)）
這篇文章主要給大家介紹了關(guān)于微信小程序自定義導(dǎo)航的相關(guān)內(nèi)容，文中通過示例代碼介紹的非常詳細(xì)，兼容各種手機(jī),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2018-12-12
主頁面中的兩個(gè)iframe實(shí)現(xiàn)鼠標(biāo)拖動(dòng)改變其大小
iframe實(shí)現(xiàn)鼠標(biāo)拖動(dòng)改變其大小在一個(gè)頁面中的兩個(gè)iframe的情況下，此方法相當(dāng)實(shí)用，感興趣的各位不妨參考下，或許對你有所幫助
2013-04-04
javascript canvas實(shí)現(xiàn)雨滴效果
這篇文章主要為大家詳細(xì)介紹了javascript canvas實(shí)現(xiàn)雨滴效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-06-06