• 固定网页背景图同时保持图片比例


    
    
    


    提供一个背景图片策略:

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


  • 相关阅读:
    linux ——process
    linux ipc—msgqueue
    JDEclipse源码查看
    用 AXIOM 促进 XML 处理
    使jets3t支持https
    正版太贵了……
    Axis2学习笔记 (Axiom 篇 )
    基于Hadoop的海量文本处理系统介绍
    详解ASP.NET MVC的请求生命周期
    .Net相关的资源连接
  • 原文地址:https://www.cnblogs.com/james1207/p/3260702.html
Copyright © 2020-2023  润新知