1000字范文,内容丰富有趣,学习的好帮手!
1000字范文 > 网页背景图自动伸缩

网页背景图自动伸缩

时间:2022-02-17 00:58:32

相关推荐

网页背景图自动伸缩

出处:/%B2%AA%C6%F0%BF%CD/blog/item/37257622472c73f6d7cae2c4.html

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

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

补充说明:

1. 背景图片自动伸缩,就是说网页的背景是一幅由你(站长)指定的图片,并且,可以随着网页(准确地说,是随着浏览视窗)的扩大、缩小而自动跟随扩大或缩小。

2. 代码应该放在网页内容之前,即,尽量紧跟在<body>之后,否则...

<!--

// ----------------

// 功能: 网页背景图伸缩

// 输入: IMAGE --- 指定所使用的图片.

// -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">

<!--

var IMAGE = "test.gif";

//-->

</script>

<script language="JavaScript" src="flex.js"></script>

<div>

Hello

</div>

</body>

</html>

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。