我試圖實現一個滑動水平佈局與標題橫幅。滑動水平響應佈局和MouseWheel輸入
這是HTML結構:
<body>
<div id="header">
<div><a href="#one"> one </a></div>
<div><a href="#two"> two </a></div>
<div><a href="#thr"> thr </a></div>
</div>
<div id="one" class="panel"> </div>
<div id="two" class="panel"> </div>
<div id="thr" class="panel"> </div>
</body>
頭是固定的,板已經被設置有梯度的背景(中間面板具有不同的顏色用於調試目的)。 這裏是CSS:
body {
width: 6000px;
overflow: hidden;
}
.panel {
width: 33.3%;
float: left;
padding-left: 30px;
padding-right: 1040px;
margin-top: -75px;
height: 960px;
background-image: linear-gradient(to bottom, #0B88FF, #95EEFF);
}
#header {
position: fixed;
height: 75px;
margin-top: 25px;
}
#two{
background-image: linear-gradient(to bottom, #0B8800, #9E5EFF);
}
最後的功能,管理面板之間的動畫:
$(document).ready(function() {
$("#header a").bind("click", function(event) {
event.preventDefault();
var target = $(this).attr("href");
$("html, body").stop().animate({
scrollLeft: $(target).offset().left,
scrollTop: $(target).offset().top
}, 1200);
});
});
我所面臨的問題有以下幾點:
1)我試着實現一個jQuery函數來在用戶使用鼠標滾輪時運行幻燈片動畫,但是我的測試沒有任何工作...結構總是相同的:
$(window).scroll(function() {
if ($(this).scrollTop() > 0) {
var target // still not able to figure out who should i target
$("html, body").stop().animate({
//to the target >,<
}
});
2)當我的瀏覽器窗口是在100%大小的一切似乎運作良好,但如果我減少或增加變焦一切都搞砸了>,< 我注意到它可以處理這個問題,並here is an example: