您的位置：首页 > 其它

网页长屏大背景淡入淡出效果在IE7、IE8下产生1px偏差

2016-01-01 22:58 435 查看

我用的是两张宽为1920px,高为2140px的图，用绝对定位让它们重叠，实现淡入淡出切换效果。第一次写的代码，在IE7和IE8下出现异常，背景图会向右偏离1px,然后再回到原位。代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style type="text/css">
*{
margin: 0;
padding: 0;
}
html,body{
height: 100%;
width: 100%;
position: relative;
}
.main{
width: 100%;
height: 2140px;
position: relative;
}
.bg{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 2140px;
}
.bg1{
background: url(images/bg1.jpg) center no-repeat;

}
.bg2{
background: url(images/bg2.jpg) center no-repeat;

}
</style>
</head>
<body>
<div class="main">
<div class="bg1 bg"></div>
<div class="bg2 bg"></div>
</div>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
var index=0;
function autopaly(){
setInterval(function(){
index++;
if(index>1){
index=0;
}
$('.bg').eq(index).fadeOut(800).siblings('.bg').fadeIn(800);
// $('.bg').eq(index).hide().siblings('.bg').show();
// $('.bg').eq(index).fadeTo(800,0).siblings('.bg').fadeTo(800,1);
// $('.bg').eq(index).animate({"opacity":0},800).siblings('.bg').animate({"opacity":1},800);
},3000)
}
autopaly();
</script>
</body>
</html>

后来做了以下尝试，1、在html上加上overflow,这样倒是正常了，但是这样滚动条就消失了，只有一屏，无法显示背景所有。2、background属性去掉center top,这样一来也没出现1px偏差，但显然不可以去掉center的，背景需要居中。3、我开始怀疑是js的问题了，于是把$('.bg').eq(index).fadeOut(800).siblings('.bg').fadeIn(800)换成$('.bg').eq(index).fadeTo(800,0).siblings('.bg').fadeTo(800,1);或者$('.bg').eq(index).animate({"opacity":0},800).siblings('.bg').animate({"opacity":1},800);但结果都不理想，于是再换成$('.bg').eq(index).hide().siblings('.bg').show();咦，居然正常了，可是我要的是淡入淡出效果啊！我在猜测也许是show，hide切换的太快，所以没看出异常来，而给它一定的时间淡入淡出过度，bug才看得清楚些。于是基本排除了是JS的问题了，那只能是布局上的问题了。对代码做了如下改动之后，问题终于解决了。

.main{max-width: 1920px;height: 2140px;position: relative;overflow: hidden;}
.bg{position: absolute;top: 0;left: 50%;width: 1920px;margin-left: -960px;height: 2140px;overflow: hidden;}

背景宽使用原来图片的宽度1920px，不写成100%，并且采用绝对定位居中的方法让它居中，它的父级元素的样式也做了改动，宽设为max-width：1920px,再加上overflow:hidden。经过不断尝试，总算把问题解决了，虽然还不知道是什么原理 ╮(╯_╰)╭。路过的大神也可以指点一下。。。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航