Próbuję wprowadzić przesuwny poziomy układ z banerem nagłówka.Przesuwne poziome ustawienie układu i wejście MouseWheel
Jest to struktura 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>
Nagłówek jest stała, a panele zostały zaopatrzone w tle gradientu (panel środkowy ma inny kolor dla celów debugowania). Oto 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);
}
I wreszcie funkcja, która zarządza animacji pomiędzy panelami:
$(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);
});
});
Problemy mam skierowane są następujące:
1) Próbowałam zaimplementować funkcję jQuery, aby uruchomić animację slajdów, gdy użytkownik używa koła myszy, ale żaden z moich testów nie działa ... struktura jest zawsze taka sama:
$(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) Kiedy okno moja przeglądarka jest w 100% wielkości wszystko wydaje się działać dobrze, ale jeśli mogę zmniejszyć lub zwiększyć zoom wszystko bałagan>, < Zauważyłem, że jest możliwe, aby sobie z tym poradzić, a here is an example: