為網頁添加動態背景 (背景輪播)
阿新 • • 發佈：2017-11-17
head over ima 切換效果 圖片 css div ext title
為網頁添加動態背景 (背景輪播)
設置網頁背景
<!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>
為網頁添加動態背景 (背景輪播)