为网页添加动态背景 (背景轮播)
以前文章 最近发现一个插件所以重新更新下本文
插件名称: jquery.backstretch.js
下面是 示例代码:
设置网页背景
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>全屏背景</title> <script src="http://api.asilu.com/cdn/jquery.js,jquery.backstretch.min.js" type="text/javascript"></script></head><body><script type="text/javascript">$.backstretch('http://api.asilu.com/cdn/img/bg/444.jpg');</script></body></html>多张张图片切换
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>全屏背景切换</title> <script src="http://api.asilu.com/cdn/jquery.js,jquery.backstretch.min.js" type="text/javascript"></script></head><body><script type="text/javascript">$.backstretch([ 'http://api.asilu.com/cdn/img/bg/444.jpg', 'http://api.asilu.com/cdn/img/bg/445.jpg', 'http://api.asilu.com/cdn/img/bg/446.jpg', 'http://api.asilu.com/cdn/img/bg/447.jpg', 'http://api.asilu.com/cdn/img/bg/448.jpg' ], { fade : 1000, // 动画时长 duration : 2000 // 切换延时});</script></body></html>2014-11-14 写的原文
看到别人的网站都有背景 自己也高了一下，但是苦于没有适合的 背景图片，所以就没有添加
现在拿出来共享一下
该代码实现了， 背景图片的切换，带有切换效果的
第一个版本 切换效果用到了 jQuery 的动画，这个版本果断放弃 不需要 jQuery切换动画由CSS设置
具体代码如下
CSS 样式
JS 代码
HTML 就一个 div#bg简单实用
<meta http-equiv="Content-Type"content="text/html; charset=UTF-8"/><style>div#bg { position: fixed; top: 0; left: 0; height: 100%; width: 100%; z-index: -10; background-position: center 0; background-repeat: no-repeat; background-attachment: fixed; background-size: cover; -webkit-background-size: cover; -o-background-size: cover; zoom: 1; opacity:1; transition: opacity 1s linear; -moz-transition: opacity 1s linear; -webkit-transition: opacity 1s linear; -o-transition: opacity 1s linear;}</style><h1><a href="http://gouji.org/?post=317">代码出处</a></h1><div id="bg"></div><script>// 定义图片路径 {num} 为 可变的图片序号var bgImgUrl = 'http://api.asilu.com/cdn/img/bg/{num}.jpg', bgNum, bgImgArr = [], bgDiv = document.getElementById("bg");// 组合数组 此处 200 为 图开始序号 结束 210for (var i=200; i <= 210; i++){ bgImgArr.push(bgImgUrl.replace('{num}', i));}setBGimg();function setBGimg(d){ if(!bgNum || bgNum >= bgImgArr.length) bgNum = 0; bgDiv.style.opacity = .001; setTimeout(function(){ bgDiv.style.backgroundImage = 'url('+ bgImgArr[bgNum] +')'; bgNum++; bgDiv.style.opacity = 1; }, 1000); if(typeof d == 'undefined') setInterval(function(){setBGimg(true);}, 6000); // 上一行的 6000 是背景图片自动切换时间(单位 毫秒)}</script>本文出自简爱博客
