zoukankan      html  css  js  c++  java
  • 固定网页背景图同时保持图片比例

    
    
    


    提供一个背景图片策略:

    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"));
    


  • 相关阅读:
    7,C++ public, protected, private 继承的区别
    6,又一道经典的微软题
    5,一道经典的微软程序题
    33. Search in Rotated Sorted Array
    198,House Robber
    4,二维数组中指针的问题
    剑指offer——stack与queue的互相实现
    3,C语言文件读写
    2,虚函数
    剑指offer——已知二叉树的先序和中序排列,重构二叉树
  • 原文地址:https://www.cnblogs.com/james1207/p/3260702.html
Copyright © 2011-2022 走看看