自适应轮播网页全屏背景,根据窗口大小保持背景图片比例。

nabi123 2014-06-03 03:26:19
之前用拉伸背景,在使用标准电脑壁纸作为网页背景时遇到的情况是不同游览器内的可视面积不同,窗口内会使壁纸压缩变形。并且使用浏览器时也经常会改变窗口大小。

演示地址是在dzzoffice中实际使用的背景效果。图片轮播速度为10分钟。
下载的代码中,轮播图片的速度设置的是10秒钟。

演示地址:http://dev.dzzoffice.com

下载地址:http://download.csdn.net/download/nabi123/7440385



如果您也在使用dzzoffice,可以直接把这个代码作为动态壁纸添加进去使用。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<style type="text/css">
html,body{overflow:hidden; height:100%; width:100%;margin:0; padding:0;}
#back1,#back0{transition: all 0.5s ease-in 0.2s;}
</style>
</head>
<body>
<div id="back0" style="position:absolute;width:100%;height:100%;margin:0;padding:0; opacity:1;"><img id="img0" style="height:100%;width:100%" src="./images/b.gif" /></div>
<div id="back1" style="position:absolute;width:100%;height:100%;margin:0;padding:0; opacity:0;"><img id="img1" style="height:100%;width:100%" src="images/b.gif" /></div>
<script>
//根据需要设置
var delay=10*1000;//轮播时间间隔单位毫秒
var max=9;//共有多少张图片,图片编号必须从1开始如1.jpg,2.jpg...
var i=0;
var current=0;
var images=arr_random(max);
var clientWidth=document.documentElement.clientWidth;
var clientHeight=document.documentElement.clientHeight;
var width=height=0;
window.onload=function(){
width=document.getElementById('img0').width;
height=document.getElementById('img0').height;
}

var src='./images/'+(images[i]+1)+'.jpg';
var loading0 = new Image();
loading0.src=src;
document.getElementById('img'+current).src=src;
setTimeout(function () {loadCheck(loading0); }, 50);

window.setInterval(function(){
i++;
if(i>max) i=1;
src='./images/'+(images[i]+1)+'.jpg';
var loading = new Image();
loading.src=src;
setTimeout(function () {loadCheck(loading); }, 50);
},delay);
function setImage(){
var r0=clientWidth/clientHeight;
var r1=width/height;
if(r0>r1){//width充满
w=clientWidth;
h=w*(height/width);
}else{
h=clientHeight;
w=h*(width/height);
}
if(current>0) var current1=0;
else var current1=1;
document.getElementById('img'+current1).src=src;
document.getElementById('img'+current1).style.width=w+'px';
document.getElementById('img'+current1).style.height=h+'px';
document.getElementById('back'+current).style.opacity=0;
document.getElementById('back'+current).style.zIndex=0;
document.getElementById('back'+current1).style.opacity=1;
document.getElementById('back'+current1).style.zIndex=1;
current=current1;
}
function loadCheck(loadding) {
if(loadding.complete) {
width = loadding.width;
height = loadding.height;
setImage();
}
};

window.onresize=function(){
clientWidth=document.documentElement.clientWidth;
clientHeight=document.documentElement.clientHeight;
setImage();
}
function arr_random(num) {
var arr=[];
for (var i = 0; i < num; i++) {
arr[i] = i;
}
for (var i = 0; i < num; i++) {
var iRand = parseInt(num * Math.random());
var temp = arr[i];
arr[i] = arr[iRand];
arr[iRand] = temp;
}
return arr;
}
</script>
</body>
</html>
...全文
334 2 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
2 条回复
切换为时间正序
请发表友善的回复…
发表回复
peak1951 2014-06-03
  • 打赏
  • 举报
回复
貌似很复杂的样子
张含韵 2014-06-03
  • 打赏
  • 举报
回复

87,997

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧