Как добавить «ручку» к скользящему элементу - PullRequest
Новая
       9

Как добавить «ручку» к скользящему элементу

1 голос
/ 03 января 2011

У меня есть небольшая заставка, и у меня есть div для всего браузера, который действует как обертка, и у меня есть div внутри #wrapper, который присоединяется к событию $.click();, чтобы выдвинуть div обертки для просмотра в браузереразмер фона фото.Я хочу реализовать небольшую кнопку / ссылку, которая будет скользить в правом нижнем углу после того, как div обертки скрыт.

Я знаю, что это, вероятно, в основном CSS, но мне нужна помощь.

Заранее спасибо за помощь!

PS: Использование jQuery в качестве моей платформы.

1 Ответ

0 голосов
/ 03 января 2011

Ключ в обратном вызове анимации #wrapper.Я предположил, что:

  1. все содержимое страницы находится внутри #wrapper, и использовал его для вычисления высоты содержимого.
  2. содержание может быть выше, чем окно браузера.
  3. вы не будете поддерживать IE6 и, следовательно, сможете использовать position: fixed;.

CSS: 

#toggler {
    position: fixed;
    width: 20px;
    height: 20px;
    left: 0;
    display: none;
    }

JS: 

jQuery(document).ready(function() {
    var windowHeight = jQuery(window).height(),
        togglerHeight = jQuery('#toggler').height(),
        togglerTopPosition = windowHeight - togglerHeight;

    jQuery(#toggler).css('top', togglerTopPosition + 'px');

    jQuery('#wrapper').click(function() {
        // take care of hiding the #wrapper
        jQuery('#wrapper').animate({
            yourSettings, 
            yourDuration, 
            function() { jQuery(#toggler).show(); } // callback
        });
    });

    jQuery('#toggler').click(function() {
        jQuery(this).hide();
        jQuery('#wrapper').animate({...});
    });
});

Как вы можете догадаться, #toggler - это маленькая кнопка / ссылка.Украсьте его, как вам будет угодно, и измените ширину и высоту по необходимости.

...