Sürme Yatay duyarlı Layout ve MouseWheel girişi

sürgülü yatay düzen başlıklı bir başlık etiketiyle uygulamaya çalışıyorum.Sürme Yatay duyarlı Layout ve MouseWheel girişi

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

başlık sabitlenir ve paneller bir gradyan arka (orta panel hata kontrolü için farklı bir renk vardır) ile temin edilmiştir:

Bu, HTML yapısıdır. Denedim

1):

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

karşılaştığım sorunlar şunlardır: paneller arasında animasyon yöneten

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

Ve nihayet fonksiyonu: İşte CSS Kullanıcı fare tekerleğini kullanırken slayt animasyonunu çalıştırmak için jQuery işlevi uygulayın, ancak testlerimin hiçbiri çalışmıyor ... yapı her zaman aynı:

$(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) benim tarayıcı penceresi% 100 olduğu zaman boyutu her şey iyi iş gibi görünüyor, ama ben azaltmak veya> < yakınlaştırma her şey pisliği artarsa işlenecek mümkündür fark ve here is an example:

kaynak

2016-02-23 Koop4

Hedeflerinizi elde etmek için, öğeyi panel sınıfında bulunan bir diziyi doldurabilir ve daha sonra panellerde gezinmek için bir dizin kullanabilirsiniz. Eğer pencere boyutlandırma durumunda kaydırma ile ilgili sorunlar varsa

Son olarak, bu event bağlamak ve

MouseWheelEvent bir göz atın istediğini yapabilirdi.

Ve koduyla bu örneği deneyin: Unravel yılında

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

kaynak

2016-03-02 12:22:48 jolmos

, bu CSS ve JavaScript transform3d ve diğer bazı css hileler kullanılarak yapılan düşünüyorum. Kaydırma olayını almak istiyorsanız, taşma sırasında gerçekleşmez: Vücudun üzerinde gizlidir, çünkü tarayıcıya tüm kaydırmalarını gizlemesini söylediniz!

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

ileri bir fare tekerleğini yapıyoruz eğer 120 döndüren bir wheelDelta özelliği vardır: Yani, şimdi yaşıyorsanız sorunu çözmek için yapmaya çalıştığım da buydu, bu gibi davranır Fare tekerleğinin olay, kullanmaktı

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


    } 
});

Bu zaman Fare tekerleğinin inşa etmeye mantığı oluşturmaya devam etmek içindir: geriye bir fare tekerleğini yaparken bilebilirdim ki, ya -120, bu yüzden Fare tekerleğinin olayı tetiklenir kaç kez bir sayaç takılı başka bir panele ve benzeri değişecek, iyi şanslar!

kaynak

2016-03-06 07:24:53 Leo

Sürme Yatay duyarlı Layout ve MouseWheel girişi

cevap

İlgili konular