經常在網上見一些網站訪問一次背景圖片改變一次，而且圖片的大小不停變換，於是想着自己研究一下。
背景圖片可以通過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地址也可以從后台用隨機數生成，效果是一樣的。