经常在网上见一些网站访问一次背景图片改变一次，而且图片的大小不停变换，于是想着自己研究一下。
背景图片可以通过JS的随机数来改变图片的src来实现随机图片，图片的大小变换可以用JS的setInterval实现。
img目录下的图片:
测试代码:
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-1.8.3.min.js"></script>
</head> <body>
<img id="img1" style="z-index: -1;position: absolute;left: 0;top: 0;" />
</body> </html>
<script>
+ function() {
//设置初始化设置
$("#img1").attr("src", "./img/" + getRandomSrc() + ".jpg");
var width = window.innerWidth > 0 ? window.innerWidth : document.body.clientWidth; //宽度
var height = window.innerHeight > 0 ? window.innerHeight : document.body.clientHeight; //高度
$("#img1").attr("width", width);
$("#img1").attr("height", height);
//动画效果
var changeSize = 100;
var time = 3000;
var heightChangeSize = changeSize * height / width;
var bigWidth = width + changeSize;
var bigHeight = height + heightChangeSize;
$("#img1").animate({
width: bigWidth,
height: bigHeight,
left: -changeSize / 2,
top: -heightChangeSize / 2
}, time);
var flag = 0;
setInterval(function() {
if (flag == 1) {
flag = 0;
$("#img1").animate({
width: bigWidth,
height: bigHeight,
left: -changeSize / 2,
top: -heightChangeSize / 2
}, time);
} else {
flag = 1;
$("#img1").animate({
width: width,
height: height,
left: "0",
top: "0"
}, time);
}
}, time);
}(); function getRandomSrc() {
var rnd = Math.ceil(Math.random() * 7);
return rnd;
}
</script>
结果可以实现每次访问图片src随机而且大小不停的变换。
一般是在登录页使用上面的效果实现呼吸图的效果，如果纵向出现滚动条的话可以用下面css代码隐藏滚动条:
<img id="img1" style="z-index: -1;position: absolute;left: 0;top: 0;width: 100%;height: 100%;"/>
html,body{
overflow-y:hidden;
}
如果在JS不生效，图片的src地址也可以从后台用随机数生成，效果是一样的。