Question

我想在手机游戏中创造这种效果。 http://jqueryfordesigners.com/demo/header-slide.html

我正在使用iScroll 4.我想将iScroll与此示例混合使用。

http://jsfiddle.net/tdQmQ/3/（这是我到目前为止，使用鼠标像触摸事件一样轻弹）

标题不在滚动区域中吗？如果有人能够指出我的方向是正确的，那就太好了。

最大的问题是锁定iScroll的滚动事件，我不知道如何。

由于

编辑：我最终建立了我想要的东西，http://jsfiddle.net/tdQmQ/25 - 仍然需要修复z-index，所以标题显示在克隆框上方。

EDIT2：我实际上最终更改了库以暴露其x和y位置，而不是在dom元素上进行间隔轮询。如果你不介意破解lib，效果要好得多。

Answer 1

热潮：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就在那里，所以滚动可以在滚动结束的值可用之前发生。

供应商prefix变量是从iScroll应用的第一种样式中提取的。

Answer 2

我最终构建了我想要的东西，http://jsfiddle.net/tdQmQ/25 - 仍需要修复z-index，以便标题显示在克隆框上方。

在移动游猎中创建此效果？

2 个答案: