Управление JQuery Easing с помощью клавиатуры - PullRequest
Новая
       5

Управление JQuery Easing с помощью клавиатуры

2 голосов
/ 09 декабря 2011

У меня есть плагин JQuery, который работает на очень простом веб-сайте, можно посмотреть здесь: http://harrisonfjord.com/folio/

Код, который у меня есть для якорных ссылок (которые вызывают функцию jquery для перемещения окна в зависимости от того, что нажато на div): 

<a href="#" style="" onclick="Animate2id('#c1'); return false" rel="Greetings"><img src="img/btn1.jpg" /></a>
<a href="#" onmouseover="" onclick="Animate2id('#c2'); return false" rel="About Us"><img src="img/btn1.jpg" /></a>
<a href="#" onclick="Animate2id('#c3'); return false" rel="Plants Plus"><img src="img/btn1.jpg" /></a>
<a href="#" onclick="Animate2id('#c4'); return false" rel="Kia Cadenza"><img src="img/btn1.jpg" /></a>
<a href="#" onclick="Animate2id('#c5'); return false" rel="Panadol"><img src="img/btn1.jpg" /></a>
<a href="#" onclick="Animate2id('#c6'); return false" rel="Asics"><img src="img/btn1.jpg" /></a>
<a href="#" onclick="Animate2id('#c7'); return false" rel="Tooheys"><img src="img/btn1.jpg" /></a>
<a href="#" onclick="Animate2id('#c8'); return false" rel="Channel 7 Olympic Coverage"><img src="img/btn1.jpg" /></a>
<a href="#" onclick="Animate2id('#c9'); return false" rel="Hit us up!"><img src="img/btn1.jpg" /></a>
<span style="font-size:25px" id="display"></span>

И код JavaScript следующий: 

$(window).keyup(function(e){
    if(e.keyCode == 39){
         //magical code goes here
    }
    return false;
});

function Animate2id(id,ease){ //the id to animate, the easing type
    var currentPage=id;
    var animSpeed=2000; //set animation speed
    var $container=$("#container"); //define the container to move
    if(ease){ //check if ease variable is set
        var easeType=ease;
    } else {
        var easeType="easeOutQuart"; //set default easing type
    }
    //do the animation
    $container.stop().animate({"left": -($(id).position().left)}, animSpeed, easeType);
}

Я попытался установить переменную для функции Animate2id, которая получает текущий просматриваемый div, который затем можно использовать для перехода к следующему или предыдущему div (но даже не знаю, мы сделали это правильно ...).

Очевидно, что все еще новичок в jquery / javascript, поэтому буду очень признателен за любую помощь.

1 Ответ

2 голосов
/ 09 декабря 2011

Прежде всего, я бы изменил ваш HTML, обработчики кликов должны быть помещены в javascript. Используйте атрибут href, чтобы указать на связанный с ним div: 

<div id="link-container">
    <a href="#c1" style="" rel="Greetings"><img src="img/btn1.jpg" /></a>
    <a href="#c2" rel="About Us"><img src="img/btn1.jpg" /></a>
    <a href="#c3" rel="Plants Plus"><img src="img/btn1.jpg" /></a>
    <a href="#c4" rel="Kia Cadenza"><img src="img/btn1.jpg" /></a>
    <a href="#c5" rel="Panadol"><img src="img/btn1.jpg" /></a>
    <a href="#c6" rel="Asics"><img src="img/btn1.jpg" /></a>
    <a href="#c7" rel="Tooheys"><img src="img/btn1.jpg" /></a>
    <a href="#c8" rel="Channel 7 Olympic Coverage"><img src="img/btn1.jpg" /></a>
    <a href="#c9" rel="Hit us up!"><img src="img/btn1.jpg" /></a>
    <span style="font-size:25px" id="display"></span>
</div>

Затем в jQuery свяжите все обработчики: 

$("#link-container A").click(function(e) {
    e.preventDefault();
    Animate2id($(this).attr("href"));   
});

Затем в Animate2id добавить класс для текущего div: 

function Animate2id(id, ease){ //the id to animate, the easing type
    $(".current").removeClass("current");
    $(id).addClass("current");

    // rest of this functions' code ...
}

Теперь, когда выбран класс div, вы можете определить, в каком направлении вам нужно двигаться, на левом / правом курсоре. 

$(window).keyup(function(e){
    if (e.which == 37) { // left cursor
         var $prevDiv = $(".current").prev("div");
         Animate2id($prevDiv.attr("id"))    
    }

    if (e.which == 39) { // right cursor
         var $nextDiv = $(".current").next("div");
         Animate2id($nextDiv.attr("id"))    
    }
});
...