为网页添加动态背景 (背景轮播)

最新推荐文章于 2024-04-21 23:29:35 发布

weixin_30698527

最新推荐文章于 2024-04-21 23:29:35 发布

阅读量2.3k

点赞数 1

文章标签：开发工具 python c#

原文链接：http://www.cnblogs.com/yhaing/p/7852689.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');
</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>

　上面这个版本切换效果用到了 jQuery 的动画，以下版本果断放弃不需要 jQuery切换动画由CSS设置

<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 为 图开始序号 结束 210
for (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>

转载于:https://www.cnblogs.com/yhaing/p/7852689.html

weixin_30698527

关注

1
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
为网页添加动态背景 (背景轮播)

为网页添加动态背景 (背景轮播)设置网页背景<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>全屏背景</title> <script src="http://api.asilu.com/cdn/jque...
复制链接

扫一扫