Tôi đang cố gắng tạo lại something like they've got over at gimmebar.com.Nội dung trang trình bày/chuyển trang
Khi bạn nhấp vào một hình ảnh, trang nội dung hiện tại sẽ trượt sang trái và mờ dần. Trang mục tiêu mờ dần và trượt xuống từ bên phải.
Tôi đã thử một vài thứ, như tạo hai div trong một vùng chứa có chiều rộng 200% và cuộn nội dung để xem và sử dụng JqueryUI và trượt các div. Việc cuộn không thành công với các div không di chuyển chút nào và srollLeft luôn là 0 bất kể cái gì. Slide hoạt động tốt hơn một chút nhưng đối với tôi có vẻ như chúng không chạy đồng thời. Div thứ hai chỉ xuất hiện trong sự tồn tại thay vì trượt độc đáo ngay phía sau đầu tiên.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>slide demo</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<style>
.container {
width: 100%;
float: left;
height: 800px;
}
#one {
background-color: red;
}
#two {
background-color: #333;
display: none;
}
</style>
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
</head>
<body>
<div class="container" id="one"></div>
<div class="container" id="two"></div>
<script>
$(document).click(function() {
$("#one").hide("slide", { direction: "left" }, 1000);
$("#two").show("slide", { direction: "left" }, 1000);
});
</script>
</body>
</html>
Có vẻ như việc này rất dễ đạt được nhưng tôi bị kẹt.
Cẩn thận.
Chỉnh sửa: Tôi thấy nó hoạt động như bạn có thể thấy trong this fiddle. Trang trình bày ở đó nhưng tôi không thể thấy không phai. Cũng có thể có một cách tốt hơn để đạt được điều này nhưng tôi khá hài lòng với việc không phải tải một lib/plugin thứ ba chỉ để trượt một div.
http://webadvent.org/2012/css-sliding-panels-by-bedrich-rios Tìm thấy hướng dẫn do nhà phát triển viết. Hãy nghĩ rằng sẽ được tính là giải pháp.
Nhà phát triển hiện liên kết với dự án tiếp theo có tên [Liquid Slider] (http://liquidslider.com/). –