Posted in Javascript onAugust 15, 2013
提供一个背景图片策略:
1,背景图片固定
2,随窗口大小改变而改变大小
3,保持比例不变而缩放
支持浏览器:IE 6,7,8,9+ ,FF,Chrome
演示地址:http://www.einino.net/bg_image.html
<style> body{margin:0; padding:0;height:2000px; } #background_img{ top:expression(documentElement.scrollTop); /*we need this expression to fixed the top*/ } </style>
/** *@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"));
固定网页背景图同时保持图片比例的思路代码
声明:登载此文出于传递更多信息之目的,并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@