网页背景图自动伸缩

来源：互联网发布：modbus数据帧格式编辑：程序博客网时间：2024/05/01 21:24

出处：http://hi.baidu.com/%B2%AA%C6%F0%BF%CD/blog/item/37257622472c73f6d7cae2c4.html

说来可能你也不信，不论HTML有多流行，也不论CSS被吹得如何厉害，可是，它们却连实现网页背景图片自动伸缩的功能也没有，至少，我在中文网站上搜索不到任何解决方案，也有声称可以做到的，可是局限于IE，而且，事实上，经过测试证实它不能使用(所以我一直都不习惯搜索中文技术资料，因为大多是垃圾)

后来，从一个国外网站上找到了一段实例，用Javascript实现的，效果不错，但它的源码很乱，整理过，张贴上来，供有兴趣的朋友研究，呵呵。

补充说明:
1. 背景图片自动伸缩，就是说网页的背景是一幅由你(站长)指定的图片，并且，可以随着网页(准确地说，是随着浏览视窗)的扩大、缩小而自动跟随扩大或缩小。
2. 代码应该放在网页内容之前，即，尽量紧跟在<body>之后，否则...

<!--
// ----------------
// 功能: 网页背景图伸缩
// 输入: IMAGE --- 指定所使用的图片.
// 2008-05-26
// ----------------
// 常量定义
var Border = 1;

var Layout_Common = "<div STYLE=\"position:absolute;top:0;left:0;z-index:1;width:100%;height:100%;\">";
var Layout_Image_HEAD = "<img id='TheImage' style=\"z-index:0;position:absolute; top:0px; left:0px; width:100%; height:100%;\" src=\"";
var Layout_Image_TAIL = "\">";

// 变量定义
var IsOnInitial = true;
var IsLayer = (document.layers)? true: false;
var IsAllDocument = (document.all)? true: false;
var IsElement = (document.getElementById && !document.all);

var OutBorder = 0;
var i = 0;

var MyImage = new Image();
var ImageParts = new Array();

function AssignImage() { TheImage.src = MyImage.src; }

function SetImage()
{
if (IsAllDocument)
{
TheImage.style.filter = "blendTrans(duration=0);";
TheImage.filters[0].Apply();
}
AssignImage();
}

function ResetImage()
{
var Parts = 0;

if (!IsOnInitial)
{
if (Parts >= OutBorder)
    {
    Parts = 0;
    SetImage();
    }
if (IsAllDocument) { TheImage.filters[0].percent=ImageParts[Parts]; }
}
}

function flex()
{
document.body.style.margin = "0px 0px";

OutBorder = Border + 100;
for (i=0; i<Border; i++) ImageParts[i]=0;
for (i=Border; i<OutBorder; i++) ImageParts[i]=i-Border;

if (IsAllDocument)
{
TheImage.style.width = document.body.scrollWidth;
TheImage.style.height= document.body.scrollHeight;
}

AssignImage();
if (IsAllDocument) SetImage();

IsOnInitial = false;
}

// 生成背景图对象, 来源是根据传入参数而定.
MyImage.src = IMAGE;

// 生成网页内容, 内容是背景图的CSS数据.
document.write(Layout_Image_HEAD + MyImage.src + Layout_Image_TAIL);
document.write(Layout_Common);

window.onload = flex;
window.onresize = new Function("window.location.reload()");
//-->

例子: test.htm
<html>
<body>
<script language="JavaScript">

</script>
<script language="JavaScript" src="flex.js"></script>
<div>
Hello
</div>
</body>
</html>