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

我用的是两张宽为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。经过不断尝试,总算把问题解决了,虽然还不知道是什么原理 ╮(╯_╰)╭。路过的大神也可以指点一下。。。

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值