文章目录

碰到一个客户网站的首页需要参考以纯Yishion官网的处理方式,并且不用flash实现。

这个需求基本上可以概括为两点:

  1. 背景图覆盖全屏
  1. 背景图要做到浏览器自适应(同时适应高度和宽度)

脑袋里理了一下思路,直接用CSS设置背景基本上不太可能办到了。于是开始自己整理js实现的思路。

  1. 将图片独立出来,用CSS控制它position:absolute; 然后放置到最底层z-index:-1;
  1. 使用js控制其跟随页面变化,但是考虑到图片变形,因此不能直接跟着页面宽高而变化,需要按照比例。例如宽度如果小于高度与宽度的比例值,则宽度不能再缩小了,只缩小高度。

今天心情比较舒畅,索性把这个功能做成了一个插件。由于托管在Github,可能有些时候直接下载资源包会有问题,可以到 https://github.com/gsgundam/jQuery.resBg 直接引用或拷贝文件。

下载插件

效果基本没问题,下面用一个html文件讲解使用方法(特别说明一下参数position,主要用途是控制是否可以查看整个背景,简单来说就是使用absolute时可能出现滚动条,而fixed不会):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="description" content="jQuery.resBg - 一个简单的自适应页面背景插件" />
<meta name="description" content="jQuery.resBg - 一个简单的自适应页面背景插件" />
<meta name="author" content="gsgundam" />
<title>jQuery.resBg - 一个简单的自适应页面背景插件</title>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.js"></script>
<script src="js/jQuery.resBg.min.js"></script>
<script>
$(document).ready(function() {
$("#bg").resBg({
position: 'absolute' //可选, 'absolute'或'fixed'
});
});
</script>
</head>
<body>
<img src="img/bg.jpg" class="resBg" id="bg" /> <!-- 使用resBg类来明确背景图片,一定要放在<body>层 -->
<div>
<p style="color:#eee; display:block; font-size:36px; text-align:center; font-family:arial, '微软雅黑'; margin-top:60px;">STEVE JOBS' WORK</p>
<p style="color:#eee; display:block; text-align:center; font-family:arial, '微软雅黑';"> 这是一个演示网站,背景大小会随着浏览器大小改变<br>This is a demo. The background picture will resize when your browser size changes.</p>
</div>
</body>
</html>

欢迎有人来指出问题,提出建议。我会尽量完善。

♦ 本文固定连接:http://gsgundam.com/2014-01-21-jquery-resbg-responsive-background-picture-plugin/

♦ 转载请注明:GSGundam 2014年01月21日发布于 GSGUNDAM砍柴工