出处: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">
<!--
var IMAGE = "test.gif";
//-->
</script>
<script language="JavaScript" src="flex.js"></script>
<div>
Hello
</div>
</body>
</html>
分享到:
相关推荐
说来可能你也不信,不论HTML有多流行,也不论CSS被吹得如何厉害,可是,它们却连实现网页背景图片自动伸缩的功能也没有,至少,我在中文网站上搜索不到任何解决方案,也有声称可以做到的,可是局限于IE,而且,事实...
HTML5网页背景自适应缩放代码,背景不随滚动条滚动,会根据分辨率不同自动匹配对应的背景图片,兼容主流浏览器(不兼容IE678)
16. jQuery动态切换网页背景的大块图片的导航栏代码 17. jquery图文排行混合互相切换效果(仿Vancl效果) 18. jQuery图片插件之鼠标放在图片上出现动态的hover效果插件 19. jQuery图片自动轮播淡入淡出的幻灯插件...
16. jQuery动态切换网页背景的大块图片的导航栏代码 17. jquery图文排行混合互相切换效果(仿Vancl效果) 18. jQuery图片插件之鼠标放在图片上出现动态的hover效果插件 19. jQuery图片自动轮播淡入淡出的幻灯插件...
16. jQuery动态切换网页背景的大块图片的导航栏代码 17. jquery图文排行混合互相切换效果(仿Vancl效果) 18. jQuery图片插件之鼠标放在图片上出现动态的hover效果插件 19. jQuery图片自动轮播淡入淡出的幻灯插件...
16. jQuery动态切换网页背景的大块图片的导航栏代码 17. jquery图文排行混合互相切换效果(仿Vancl效果) 18. jQuery图片插件之鼠标放在图片上出现动态的hover效果插件 19. jQuery图片自动轮播淡入淡出的幻灯插件...
16.jQuery动态切换网页背景的大块图片的导航栏代码 17.jquery图文排行混合互相切换效果(仿Vancl效果) 18.jQuery图片插件之鼠标放在图片上出现动态的hover效果插件 19.jQuery图片自动轮播淡入淡出的幻灯插件...
实例239 随机变化的网页背景 369 8.5 选择头像 370 实例240 在列表中选择图片 370 实例241 在弹出的新窗口中选择图片 372 8.6 在页面中播放图片 374 实例242 幻灯片式播放图片 374 实例243 无间断的图片循环滚动效果...
此功能非常适用,由于改变原商品图后,背景图大小不变,因此增加了商品图开关功能,对于个别需要调整图片大小的客户,保需要把商品背景图关闭即可,不影响整体效果。 三六、时尚版商品多元化设计,适合各行各业开店...
◆自动伸缩功能,让用户有更多屏幕空间显示其他内容; ◆支持屏幕吸附功能,自动吸附到屏幕边缘; ◆软件完全绿色,不写入任何数据到注册表; 这次新的XP版本,完全废弃了以前版本的代码,全部重新设计书写,...
◆自动伸缩功能,让用户有更多屏幕空间显示其他内容; ◆支持屏幕吸附功能,自动吸附到屏幕边缘; ◆软件完全绿色,不写入任何数据到注册表; 这次新的XP版本,完全废弃了以前版本的代码,全部重新设计书写,...
SuperCx 是面向过程监控与工业自动化的 HMI/SCADA 软件开发平台(俗称组态软件),运行于Windows系统上,可以广泛应用于需要数据采集、对象控制、过程监视与控制等的各种应用中,如:石油、化工、钢铁、电力、环保、...
93 2.10.2 三次方贝塞尔曲线 95 2.11 多边形的绘制 97 2.12 高级路径操作 102 2.12.1 拖动多边形对象 102 2.12.2 编辑贝塞尔曲线 107 2.12.3 自动滚动网页,使某段路径所对应的元素显示在视窗中 115 2.13 ...
8,改进了播放列表下拉菜单的长度有时因添加内容名称过长导致名称的遮挡现象,这次播放列表可以根据添加内容的名称自动伸缩长度,但有最大值的限制,不是无限变长!9,彻底的修正了由于Realone的插件不稳定性,导致...
12.2 创建可伸缩图像 239 12.3 创建弹性布局网格 241 12.4 理解和实现媒体查询 245 12.5 组合使用 251 12.6 兼容旧版IE 257 第13章 使用Web字体 259 13.1 什么是Web字体 259 13.2 在哪里能...
2.[改进]改进后台文章管理 缩略图示意图,图片图标代表本地缩略图,电脑图标代表远程缩略图 3.[纠正]纠正外部调用代码会显示出未审核状态和隐藏状态的文章 4.[纠正]纠正外部调用代码对采用外部链接的文章路径没法...
|--ExpandableListView(下拉伸缩ListView) |--GridView表格布局的用法 |--httpclient超时 |--info体系 |--Intent启动应用apk安装 |--Intent常用功能 |--IO将输入流转成字节 |--Json读js资源文件 |--layout布局样式之...
1.1. 选题背景 这几年,许多新名词涌入我们的视野:博客、圈子、播客、WAP等。这些都预示着我们进入了一个新的互联网阶段web 2.0,它是相对web 1.0的新的一类互联网应用的总称,是一次从核心内容到外部应用的革命...