3

我正在尝试模拟我在众多 iPhone 应用程序上看到的效果。当单击按钮时，它实质上是从右向左滑动屏幕上的内容。原始屏幕的内容向左滑出视图，下一个屏幕的内容从右侧向中心滑入视图。

我已经能够用 jQuery 来模拟这个。看到这个小提琴。它工作得很好，但是随着动画变得更加复杂（即添加按钮以恢复到原始屏幕或当有两个以上的屏幕时），这种方法变得非常复杂和混乱。我确信有一种更有效的方法可以实现这种效果，但我不知道。有人可以给我一个提示吗？我在网上搜索过，但我认为我在搜索中使用的术语不正确，因为我没有找到任何东西。我的代码如下所示。

HTML：

<div id="screen1">
    <div id="header">Screen 1</div>
</div>

<div id="screen2">
    <div id="header">Screen 2</div>
</div>

<a href="#" id="button">Swipe</a>

CSS：

body, html {
    width: 100%;
    height: 100%;
}

#screen1 {
    background: blue;
    width: 100%;
    height: 100%;
    position: fixed;
}

#header {
    height: 50px;
    width: 100%;
    background: red;
}

#screen2 {
    background: green;
    width: 0px;
    height: 100%;
    position: fixed;
    right: 0;
}

jQuery：

$('#button').click(function(){
    $('#screen1').animate({width: '0px'});
    $('#screen2').animate({width: '100%'});
});

JS 小提琴示例

4

2 回答 2

2

我认为您目前正在做的事情没有任何问题。您可以进行的一项改进是在切换屏幕时仅对一个元素进行动画处理。例如，给出#screen1 z-index: 1和#screen2 z-index: 2。然后您可以删除动画线，#screen1因为另一个屏幕将出现在它的顶部。jsFiddle 示例

如果您有多个屏幕，您可以使用z-index: 0. 当你想让一个屏幕出现在顶部时，先给它z-index: 1，然后执行动画把它放在其他屏幕的顶部。在另一个屏幕上再次执行此操作时，您可以执行相同的操作并在动画之前切换 z-indexes。您还需要适当地设置宽度。最后，你的 JS 可能看起来像这样：

$targetScreen = getTargetScreen(); // somehow figure out which screen you're switching to
$prevTargetScreen = getPrevTargetScreen(); // this will also depend on your implementation

$prevTargetScreen.css('z-index', 0);
$targetScreen
    .css({ width: 0, `z-index`: 1 })
    .animate({width: '100%'});
于 2013-05-19T21:05:59.683 回答
2

使用多个屏幕的一种简单方法是将所有屏幕保存在一个数组中并记住您当前所​​在的屏幕。

看看这个小提琴：http: //jsfiddle.net/9C9yf/4/

我的第一个建议是不要为宽度设置动画（它会弄乱定位），而是为屏幕上的左侧位置设置动画（我将它们设置为absolute）。

然后在加载时，每个屏幕都必须在top : 0; left : 100%.

然后在 DOM ready 上调用此代码：

var arrScreen = new Array();

$('.screen').each(function(){
   arrScreen.push($(this));
})

var currentScreen = 0;

arrScreen[currentScreen].css('left', '0%');

这将保存页数并显示第一页。

之后，您需要更改滑动操作。此代码目前适用于一侧，但我相信您会找到一种方法来为另一侧设置动画：

$('.button').click(function(){
    if(currentScreen < arrScreen.length){
        currentScreen++;
        arrScreen[currentScreen].animate({'left' : '0%'});
    }
});

基本上，它检查我们是否不在最后一页，然后为下一个元素的左侧位置设置动画。

如果您希望转到上一页，请注意，动画left属性将为 100%。

于 2013-05-19T21:13:55.600 回答