0

我是初学者，并试图通过点击操作从页面的滑动底部显示卡片/瓷砖的详细信息。我已经找到了一个符合我要求的模板并尝试进行自定义。我发现很少有关于如何从底部进行滑动效果的代码示例。我能够找到解决方案，但它适用于悬停动作，正如我试图做的那样，如下所示。

场景：如模型截图所示 >> 卡片将显示在主屏幕 >> 用户点击其中一张卡片 >> 背景应该是透明的 50% 并且电影详细信息应该显示在滑动按钮面板中 >> PLAY NOW 应该积极点

就像下面给定模板中的左侧菜单加载一样 - playdo 模板

我发现的类似示例之一是这个，但正如我提到的，这是悬停功能 -通过 HTML、CSS 和 JS 滑动底部面板

另一个从顶部滑动 - http://hoveralls.design-way.ro/

我正在使用的屏幕截图中的模板是 - https://github.com/tomclaus/playdo

4

2 回答 2

0

您好，欢迎来到前端世界。

您需要做的是创建两个不同的 css 类，其中包含您想要更改的内容（在本例中为顶部和透明度）。一种用于您的卡片/瓷砖“最小化”，另一种用于“最大化”。

.minimized{
    background-color: rgba(255,255,255, 0.5);
    top: 90%;
}

.maximized{
    background-color: rgba(255,255,255, 1);
    top: 75%;
}

然后使用 jQuery 或 Javascript 将点击事件应用于您的卡片/标题并交换这些类以提供正确的行为。

$("#card").click(function(){
    if($(this).hasClass('minimized')){

        $(this).removeClass('minimized');
        $(this).addClass('maximized');
    }
    else{

        $(this).removeClass('maximized');
        $(this).addClass('minimized');
    }
});

确保您的卡片/磁贴的 CSS 包含以下内容：

-webkit-transition: all ease 1s;

当您交换最小化和最大化类时，该行将提供平滑过渡。

请检查此 jsfiddle以查看实际代码。

附言。由于我使用“-webkit-”前缀进行转换，因此这个示例仅适用于 webkit 浏览器（safari 和 chrome）

于 2013-09-19T04:23:35.170 回答
0

好的，我终于明白你想用模型做什么了。好吧，这个想法是一样的，我相信它可以通过许多其他方式实现，但我希望这个可以帮助你理解正在发生的事情。

您几乎需要两个状态（类）来实现您想要实现的操作。

保存电影细节的 div 的最小化和最大化。

#details{
    z-index: 4;
    position: absolute;
    -webkit-transition: all ease 1s;
    background-color: #2980b9;

    color: white;
    padding: 30px;
    width: 100%;
    height: 300px;    
}

.minimized{
    top: 100%;
}

.maximized{
    top: 40%;
}

其他两个用于显示细节时位于卡片顶部的“灰色宫廷”。

#courtain{
     position:absolute;
     background-color: rgba(100,100,100, 0.5);
     width: 100%;
     height: 100%;
}

.active{
    z-index: 2;
}

.deactive{
    z-index: -1;
}

所有这些都必须使用带有卡片点击事件的 Javascript 进行控制或切换。

function hideAndShow(){
    var details = $('#details');
    var courtain = $('#courtain');

    if(details.hasClass('minimized')){
        courtain.removeClass('deactive');
        courtain.addClass('active');
        details.removeClass('minimized');
        details.addClass('maximized');
    }
    else{
        courtain.removeClass('active');
        courtain.addClass('deactive');
        details.removeClass('maximized');
        details.addClass('minimized');
    }
}

检查状态上的“z-index”值以将它们正确放置在另一个之上是很重要的，具有最高 z-index 值的那个是保持在顶部的那个。

我已经更新了JSFiddle，检查一下，希望这一切都有意义。

于 2013-09-20T02:19:10.600 回答