Создать этот эффект в мобильном сафари? - PullRequest
Новая
       40

Создать этот эффект в мобильном сафари?

6 голосов
/ 06 декабря 2011

Я хочу создать этот эффект в мобильном сафари.http://jqueryfordesigners.com/demo/header-slide.html

Я использую iScroll 4. Я хочу смешать iScroll с этим примером.

http://jsfiddle.net/tdQmQ/3/ (вот что у меня есть, используйте мышь длящелчок как событие касания)

Разве заголовки не должны находиться в области прокрутки?Если кто-нибудь может указать мне правильное направление, это было бы здорово.

Самая большая проблема заключается в фиксации событий прокрутки в iScroll, я не знаю как.

Спасибо

РЕДАКТИРОВАТЬ: Я наконец-то построил то, что искал, http://jsfiddle.net/tdQmQ/25 - все еще нужно исправить z-index, чтобы заголовки отображались над полем клона.

РЕДАКТИРОВАТЬ 2: Я фактически закончил тем, что изменил библиотеку, чтобы выставить ее позиции x и y, вместо того, чтобы делать интервальный опрос для элемента dom.Работает намного лучше, если вы не против взломать библиотеку.

Ответы [ 2 ]

3 голосов
/ 06 декабря 2011

Boom: http://jsfiddle.net/jasper/tdQmQ/11/ ( Обновлен, чтобы включать в себя событие touchend, а также mouseup )

JS - 

var scroller = new iScroll('scroll',{snap:'.header'}),
    $headers = $('.header:not(.fixed)'),
    prefix   = $('#content')[0].style[0].replace('transition-property', '');

$('#content').on('mouseup touchend', function () {
    setTimeout(function () {
        var y  = $('#content').css(prefix + 'transform').replace(')', '').split(',')[5],
            of = {index : 0, offset : 10000};

        $headers.each(function (index, obj) {
            var tmp = Math.abs($(this).position().top + parseInt(y));
            //console.log($(this).position().top + ' + ' + parseInt(y) + ' = ' + tmp);
            if (tmp < of.offset) {
                of.offset = tmp;
                of.index  = index;
            }
        });
        //console.log(of.index + ' = ' + of.offset);
        $('#head').text($headers.eq(of.index).text());
    }, 500);
});

HTML--

<div id="iphonewrap">
    <div class="header fixed" id="head">head1</div>
    <div id="scroll">
        <ul id="content">
            <li>
                <div class="header">head1</div>
                <div class="body">body1</div>
            </li>
            <li>
                <div class="header">head2</div>
                <div class="body">body2</div>
            </li>   
        </ul>
    </div>
</div>

CSS - 

#head {
    position : absolute;
    top      : 60px;
    left     : 10px;
    right    : 0;
    z-index  : 10;
}
#scroll{
    position: absolute;
    height: 300px;
    width: 200px;
    top: 60px;
    right: 10px;
    bottom: 60px:
    left: 10px;
    background: rgba(245,245,245,1);
}

#content{
    min-height: 100%;
    width: 200px;   
}

.header{
    width: 198px;
    height: 30px;
    background: rgba(234,235,244,1);
    border: 1px solid white;
    text-align: center;
    padding-top: 10px;
}

.body{
    width: 198px;
    height: 300px;
    background: rgba(224,225,234,1);
    border-left: 1px solid white;
    border-right: 1px solid white;
    border-bottom: 1px solid white;
    text-align: center;
    padding-top: 10px;
}

body{
    background: rgba(234,234,234,1);
    font-family: sans-serif;
    color: rgba(34,34,34,0.7);
}

#iphonewrap{
    position: absolute;
    height: 420px;
    width: 220px;
    left: 50%;
    top: 50%;
    margin-left: -110px;
    margin-top: -210px;
    background: black;
    border-radius: 20px;
    border: 1px solid gray;
}

Имеется setTimeout, поэтому прокрутка может произойти до того, как станут доступны значения, для которых заканчиваются прокрутки.

переменная vender prefix извлекается из первого стиля, примененного iScroll.

0 голосов
/ 06 декабря 2011

Я наконец построил то, что искал, http://jsfiddle.net/tdQmQ/25 - все еще нужно исправить z-index, чтобы заголовки показывались над полем клона.

...