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