Ok Düğmelerini Kullanarak Pencereyi Yatay Kaydırmak İçin

Temel olarak yatay olarak kaydırılan içeriğe sahip bir web sitem var. Tüm sayfada olduğu gibi yatay olarak kaydırılır, sadece bir div değil.Ok Düğmelerini Kullanarak Pencereyi Yatay Kaydırmak İçin

Sağa ve sola ok düğmelerini, üzerinde veya üzerinde duran düğmeler (daha önce hangisi olduğu farketmez) kullanmaya çalışıyorum, tüm pencereyi (düzgün) sola ve sağa kaydırır.

Bu web sitesi hemen hemen Küçüklüğümden merkezli oklarla istediğimizi yapar http://www.clholloway.co.za

kimse bu konuda yardımcı olabilir misiniz? Şerefe.

kaynak

2013-08-06 user2634764

Bence jQuery ile aradığınız şeyi elde edebilirsiniz. Temel fikir, daha sonra kaydırma işlemini başlatmak için kullanabileceğiniz bazı olayları (onmouseenter, mousedown, ...) ele almaktır.

Imagining bazı şuna benzer biçimlendirme var: o pencere kaydırma neden olur sağlamak için

<div id="parent"> 
    <div class="contentBlock">1</div> 
    <div class="contentBlock">2</div> 
    <div class="contentBlock">3</div> 
    <div class="contentBlock">4</div> 
    <div class="contentBlock">5</div> 
</div> 
<span id="panLeft" class="panner" data-scroll-modifier='-1'>Left</span> 

<span id="panRight" class="panner" data-scroll-modifier='1'>Right</span>

Ve birkaç stilleri:

#parent { 
    width:6000px; 
} 
.contentBlock { 
    font-size:10em; 
    text-align:center; 
    line-height:400px; 
    height:400px; 
    width:500px; 
    margin:10px; 
    border:1px solid black; 
    float:left; 
} 
.panner { 
    border:1px solid black; 
    display:block; 
    position:fixed; 
    width:50px; 
    height:50px; 
    top:45%; 
} 
.active{ 
    color:red; 
} 
#panLeft { 
    left:0px; 
} 
#panRight { 
    right:0px; 
}

Sen stil bir arada kullanabilirsiniz, İstediğiniz efekti elde etmek için setInterval ve jQuery.scrollLeft().

(function() { 

    var scrollHandle = 0, 
     scrollStep = 5, 
     parent = $(window); 

    //Start the scrolling process 
    $(".panner").on("mouseenter", function() { 
     var data = $(this).data('scrollModifier'), 
      direction = parseInt(data, 10);   

     $(this).addClass('active'); 

     startScrolling(direction, scrollStep); 
    }); 

    //Kill the scrolling 
    $(".panner").on("mouseleave", function() { 
     stopScrolling(); 
     $(this).removeClass('active'); 
    }); 

    //Actual handling of the scrolling 
    function startScrolling(modifier, step) { 
     if (scrollHandle === 0) { 
      scrollHandle = setInterval(function() { 
       var newOffset = parent.scrollLeft() + (scrollStep * modifier); 

       parent.scrollLeft(newOffset); 
      }, 10); 
     } 
    } 

    function stopScrolling() { 
     clearInterval(scrollHandle); 
     scrollHandle = 0; 
    } 

}());

Tam jsFiddle bu yaklaşımı gösteren: yardımcı olmak için http://jsfiddle.net/jwcarroll/atAHh/

kaynak

2013-08-06 18:58:22 Josh

Teşekkürler bu kesinlikle mükemmel! Büyük bir baş ağrısını çözdün! Ve çok küçük bir değişiklik ile, onmousedown'a çevirebilirsin (eğer ilgilenirse, burada durmak için kemanı değiştirmeye çalıştım: http://jsfiddle.net/atAHh/2/). – user2634764

@ user2634764 - Sorun değil. Yardım ettiğim için çok mutluyum :) – Josh

body öğesini görünüm bağlantı noktasından daha geniş bir genişliğe ayarlarsanız (ve taşmayı gizlemediyseniz) tarayıcı otomatik olarak yatay kaydırma tuşunu otomatik olarak kaydırmayı destekler. Bu web sayfasında dikey oku kaydırma kullanmakla aynı şey.

kaynak

2013-08-06 17:56:16

Farkındayım - ama otomatik sol/sağ ok tuşu kaydırma çok yavaş ve yeterince pürüzsüz değil, bence. İdeal olarak, bunu başarmanın en kolay yolunun tarayıcı penceresini sola veya sağa kaydıran düğmeler olduğunu düşünüyorum. Ok tuşlarını bastığınız sırada kaydırmak için ok tuşlarını kullanabiliyor olsam da mutlu olurdum ve bıraktığınız gibi duruyorum - ama mücadele ediyorum çünkü JS benim en güçlü dilim değil! – user2634764

Hiçbir şey yerel kaydırma işleminden daha hızlı veya pürüzsüz olamaz. JS'deki olayları yakalarsanız, JS çalışma zamanını sürekli olarak yürütüyorsunuz. Bu, tarayıcı görünümüne kaydırma, katman ekleme ve yavaşlatma işlemlerini bildirir. Yapabileceğin tek şey, JS'deki anahtarı yakalamak ve normalde olduğundan çok daha fazla kaydırmaktır, ancak bu kullanıcı için sarsıcı olacaktır. –

Bu Fiddle oluşturduk. Bir göz atın ve doğru yönde sizi yönlendirmeye yardımcı olup olmadığını görün. Muhtemelen durumunuza göre uyarlamanız gerekecek, ancak ummanıza gerek duyduğunu umalım.

Açık kaydırma çubuklarının görüntülenmemesi için <body>'a overflow:hidden koyduğumu unutmayın; istenirse değiştir.

Şerefe!

kaynak

2013-08-06 19:05:24 emgee

Ok Düğmelerini Kullanarak Pencereyi Yatay Kaydırmak İçin

cevap

İlgili konular