Sliding Horizontal responsive Layout und MouseWheel Eingabe

Ich versuche, ein gleitendes horizontales Layout mit einem Header-Banner zu implementieren.Sliding Horizontal responsive Layout und MouseWheel Eingabe

Dies ist die HTML-Struktur:

<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>

Der Header festgelegt ist, und Platten wurden mit einem Gradienten Hintergrund (mittlere Tafel hat eine andere Farbe für Debug-Zwecke) zur Verfügung gestellt. Hier ist die 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); 
    }

Und schließlich die Funktion, die die Animation zwischen den Platten verwaltet:

$(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); 
    }); 
});

Die Probleme, die ich bin vor sind die folgenden:

1) Ich habe versucht, implementieren Sie eine jQuery-Funktion zum Ausführen der Folie Animation, wenn Benutzer das Mausrad verwendet, aber keiner meiner Tests funktioniert ... die Struktur ist immer die gleiche:

$(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) Wenn mein Browser-Fenster bei 100% ist, scheint Größe alles gut zu funktionieren, aber wenn ich den Zoom alles vermasseln> verringern oder erhöhen, < Ich stelle fest, es möglich ist, dies zu handhaben, und here is an example:

Quelle

2016-02-23 Koop4

Um Ihre Ziele zu erreichen, können Sie einfach ein Array mit dem Element panel füllen und dann einen Index verwenden, um sich durch die Bereiche zu bewegen.

Schließlich, wenn Sie Probleme mit der Rolle auf Fenster Resize haben, können Sie diese event binden und tun, was Sie wollen

bei MouseWheelEvent Werfen Sie einen Blick.

Und versucht, dieses Beispiel mit Ihrem Code:

$(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); 
 
    }); 
 
    
 
    var scroll_targets = $(".panel"); 
 
    var scroll_targets_index = 0; 
 
    $(window).on('DOMMouseScroll mousewheel', function (e) {  
 
    if (e.originalEvent.wheelDelta < 0) { 
 
     if(scroll_targets_index < scroll_targets.length-1){ 
 
     var where = ++scroll_targets_index; 
 
     $("html, body").stop().animate({ 
 
      scrollLeft: $(scroll_targets[where]).offset().left, 
 
      scrollTop: $(scroll_targets[where]).offset().top 
 
     }, 1200); 
 
     } 
 
    } 
 
    else { 
 
    \t var where; 
 
    \t if(scroll_targets_index > 0){ 
 
     \t where = --scroll_targets_index; 
 
     } 
 
     else{ 
 
     \t where = 0; 
 
     } 
 
     \t $("html, body").stop().animate({ 
 
      scrollLeft: $(scroll_targets[where]).offset().left, 
 
      scrollTop: $(scroll_targets[where]).offset().top 
 
     }, 1200); 
 
     
 
    } 
 
    }); 
 
    
 
    $(window).resize(function() { 
 
    $('html,body').scrollTop($(scroll_targets[where]).offset().top); 
 
    $('html,body').scrollLeft($(scroll_targets[where]).offset().left); 
 
    }); 
 
});

#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); 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="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> 
 
</div>

Quelle

2016-03-02 12:22:48 jolmos

Im Entwirren, ich denke, das gemacht wurde mit CSS und JavaScript Transform3D und einigen anderen CSS-Tricks. Wenn Sie das Scroll-Ereignis erhalten möchten, wird es nicht passieren, während Sie überlaufen: versteckt auf dem Körper, weil Sie gerade dem Browser gesagt haben, alle seine Schriftrollen zu verstecken! Also, was ich das Problem zu tun versucht zu lösen, die Sie jetzt haben, war das Mausrad-Ereignis zu verwenden, die wie folgt wirkt:

$(window).on('wheel', function (event) {  
    console.log(event); // Here you can see all of its events properties and functions in the console 
});

Es gibt eine wheelDelta Eigenschaft, die 120 zurückgibt, wenn Sie ein Mausrad nach vorne tun oder -120, wenn ein Mausrad rückwärts zu tun, so angebracht ich einen Zähler, so dass ich wie oft Mausrad Ereignis ausgelöst wissen konnte: nur Dies ist für Sie die Logik zu schaffen, um fortzufahren

$(window).on('wheel', function (event) {  

    if (event.originalEvent.wheelDelta/120 > 0) { 
     count++; 
     console.log(count) ; 
     if(count > 30){ 

      $("html, body").stop().animate({ 
       scrollLeft: $('#two').offset().left, 
       scrollTop: $('#two').offset().top 
      }, 1200); 
     } 
     if(count > 60){ 

      $("html, body").stop().animate({ 
       scrollLeft: $('#thr').offset().left, 
       scrollTop: $('#thr').offset().top 
      }, 1200);    
     } 
     if(count > 90){ 

      $("html, body").stop().animate({ 
       scrollLeft: $('#two').offset().left, 
       scrollTop: $('#two').offset().top 
      }, 1200); 
      count = 0;   
     } 


    } 
});

wenn das Mausrad zu bauen wird zu einem anderen Panel und so weiter, viel Glück!

Quelle

2016-03-06 07:24:53 Leo

Sliding Horizontal responsive Layout und MouseWheel Eingabe

Antwort

Verwandte Themen