1
我有一个固定宽度的div容器和里面的一些元素，它们使用position：absolute来放置。我有四个图层来创建具有斜面图像和“开放”效果的效果。如何使几个绝对定位元素响应
现在，这是工作，你可以看到我在下面的jsfiddle。 （jsfiddle - working Example）问题是，我怎么能做出这个响应。我的意思是不是移动的，但是对于一个100％宽度的布局，其中窗口可以调整大小和下列要求得到满足：
- “测试”文本和开启按钮的三棱总是居中在中心
- 图像左侧和右侧可以从左侧被板缺（对于左画面）区域和右（右用画面）
我试图与背景尺寸的工作：盖，但是当我调整浏览器窗口大小时，它不能按预期工作。
这里是我的代码（HTML）：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Test</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="test.css">
<script src="jquery-1.11.1.js"></script>
</head>
<body>
<div id="slider">
<div class="img left"></div>
<div class="img right"></div>
<div class="text">
<h1>Test</h1>
<a href="#">open</a>
</div>
<div class="textLeft">
Duis at tincidunt erat. Nullam tellus mi, aliquam ultricies nisi ac, porttitor aliquam nulla. Donec scelerisque magna euismod purus imperdiet sollicitudin. Etiam vel lacus ex. Duis tempus urna eu volutpat tristique. Aenean vel ante pulvinar, sodales magna id, mollis urna. Duis at tincidunt erat. Nullam tellus mi, aliquam ultricies nisi ac, porttitor aliquam nulla. Donec scelerisque magna euismod purus imperdiet sollicitudin. Etiam vel lacus ex. Duis tempus urna eu volutpat tristique. Aenean vel ante pulvinar, sodales magna id, mollis urna.
</div>
<div class="textRight">
Duis at tincidunt erat. Nullam tellus mi, aliquam ultricies nisi ac, porttitor aliquam nulla. Donec scelerisque magna euismod purus imperdiet sollicitudin. Etiam vel lacus ex. Duis tempus urna eu volutpat tristique. Aenean vel ante pulvinar, sodales magna id, mollis urna. Duis at tincidunt erat. Nullam tellus mi, aliquam ultricies nisi ac, porttitor aliquam nulla. Donec scelerisque magna euismod purus imperdiet sollicitudin. Etiam vel lacus ex. Duis tempus urna eu volutpat tristique. Aenean vel ante pulvinar, sodales magna id, mollis urna.
</div>
</div>
<script>
$("a").click(function() {
$(".left").animate({
right: "850px",
}, 1000);
$(".right").animate({
left: "850px",
}, 1000);
});
</script>
</body>
</html>
CSS：
#slider{
background-color: black;
position: relative;
height: 500px;
width: 1000px;
overflow: hidden;
}
#slider .img.left,
#slider .img.right{
height: 500px;
position: absolute;
top: 0;
}
#slider .img.left{
background-image: url(imgLeft.png);
right: 410px;
width: 590px;
z-index: 3;
}
#slider .img.right{
background-image: url(imgRight.png);
left: 250px;
width: 750px;
z-index: 2;
}
#slider .img.left.open{
right: 750px;
}
#slider .img.right.open{
left: 750px;
}
#slider .text{
color: white;
position: absolute;
bottom: 45px;
height: 100px;
width: 200px;
left: 45%;
z-index: 4;
}
#slider .textLeft,
#slider .textRight{
position: absolute;
color: white;
height: 300px;
width: 300px;
z-index: 1;
}
#slider .textLeft{
right: 100px;
top: 100px;
}
#slider .textRight{
left: 100px;
top: 100px;
}
a{
color: white;
}
因为它更易于编辑和提出建议，我创建了一个的jsfiddle：
只要不使用固定的像素值，使用百分比。一个简单的例子 - http://codepen.io/Paulie-D/pen/dgcha – 2014-09-11 09:36:24
与问题无关，但你可以使用'：before'和'：after'而不是'.img.left'和' img.right'。只是一个小优化，但清理你的标记。根据您的浏览器要求，您也可以使用CSS动画（比js更平滑）。如果不支持css动画，您总是可以使用Modernizr检查支持并回退到当前的方法。这里有一个CSS动画和伪元素的小提琴：http://jsfiddle.net/2y17p1Lu/3/ – 2014-09-11 09:45:25