css - 元素从标题后面掉落-6ren

css - 元素从标题后面掉落

转载作者：太空宇宙更新时间：2023-11-04 04:47:58

26

4

我有一个 .png 格式的横幅，我希望它在单击后从标题后面下降。这是我尝试过的方法，但在这种情况下，div 又回到了原来的位置。我希望它位于标题后面(隐藏)并在转换后保持其位置:

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:myfirst 5s linear 2s;

-webkit-animation:myfirst 5s linear 2s;

}

@keyframes myfirst
{
0%   {background:red; left:0px; top:0px;}
100%  {background:green; left:0px; top:200px;}
}


@-webkit-keyframes myfirst /* Safari and Chrome */
{
0%   {background:red; left:0px; top:0px;}
100%  {background:green; left:0px; top:200px;}
}

</style>
</head>
<body>


 <div></div>

 </body>
 </html>

我也尝试过使用 jQuery 的 slideDown() 但很遗憾，因为它是一张图片，所以看起来不够好。

谢谢!

最佳答案

这是一个 jQuery 解决方案，也许有人可以想出一个更优雅的解决方案，但请尝试一下。我希望这是你追求的行为。

jsFiddle:http://jsfiddle.net/fabio_silva/Qhrnd/

HTML

<div id="header">header</div>
<div id="banner">banner</div>

CSS

div#header
{
    background: #abc;        
    width: 500px;
    height: 100px;
    position: relative;
    z-index: 1;
}
div#banner
{
    width: 500px;
    height: 100px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    background: url('http://jsfiddle.net/img/logo.png') no-repeat 50% 50%;
    background-color: #345;
}

Javascript/jQuery

var hidden = true;
$(document).ready(function () {
    $("#header").click(function () {
        if (hidden)
        {
            $("#banner").animate({
                top: '+=100',
                display: 'block' //updated

            }, 500);
            hidden=false;
        }
        else
        {
            $("#banner").animate({
                top: '-=100'
                display: 'none' //updated
            }, 500);
            hidden=true;
        }

    });
});

关于css - 元素从标题后面掉落，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14084997/

26

4

0

文章推荐： html - 难以使 h2 元素和左/右边框对齐

文章推荐： Python - TypeError : tuple indices must be integers or slices, 不是 str

文章推荐： jquery - 为什么类没有设置attr？

Java Sprite 掉落？
抱歉，我不知道如何正确表达标题。但我正在制作一个 Java 游戏，屏幕底部有一个桨，您可以左右移动它以避免小行星坠落。我的桨可以工作，但我不知道如何制作一颗下落的小行星。小行星目前只是一个矩形。我还希
objective-c - 对象 'breaks' 掉落
我制作了一个 x=25 & y= 25 的正方形并附加了一个 SKPhysicsBody。我制作了一个标准平台关卡，其中有几个高的下降区域。我希望正方形“破裂”/因从高处坠落而受到损坏。我查了一下维基
android - 如何在AndEngine Android中制作一个 Sprite 掉落
我是一名初级游戏程序员，我正在学习如何使用适用于 Android 的 AndEngine。我想让一个 Sprite 从屏幕上掉下来，并在用户触摸时向上跳。关于如何做到这一点的任何想法？如果这样更容易，
c++ - 如何防止 OgreBullet Capsule 掉落？
我刚刚开始在我的 Ogre 项目中实现 bullet。我按照此处的安装说明进行操作:http://www.ogre3d.org/tikiwiki/OgreBullet+Tutorial+1 剩下的教程
IOS7:Pop ViewController 强制 UIImageView 掉落
将我的项目升级到 iOS7 后当我执行 BACK 按钮并且 UINavigationController 返回上一页时，屏幕顶部的 ImageView 会向下移动。我使用 IB 来做我的布局。这些
javascript - 切换 div 时 Div 掉落
我有两个内联 div，其中一个内联 div 有两个彼此下方的 div。 JSFiddle 点击#notLoginStudentBtn 我在做什么我正在切换#notLoginStudentBox 但在切
ios - 如何在 SpriteKit 中使用物理原理让移动的 Sprite 掉落
我有一个移动的对象，它生成由滑动关节连接的 object2 当我按下按钮时，关节被移除，object2 在重力作用下落下这可行，但只在 x 轴上落下而不会保持其 y 轴速度。如何让 Object2
javascript - jquery draggable droppable remove 掉落
如何从购物车中删除商品？自然地，您希望能够将项目拖放回去。 $(function() { $( "#catalog" ).accordion(); $( "#cata
arrays - 掉落(其中 : {}) remove(where: {}) function in Swift?
Swift 标准库中是否有作用于集合、采用谓词并返回从该集合中移除的值的函数？目前，我必须分两步实现它: guard let idx = allAnnotations.index(where: {$
c# - 添加 RigidBody 后，Collider 如何从 GameObject 掉落？
我真的需要一些关于我的游戏对象的帮助。我正在开发一款游戏，我想要一个拾取元素来产生物理力爆炸来炸毁敌人。我做了一个简单的炸弹对象来测试这个想法。我添加了一个简单的代码，使用一个循环来收集其半径内的所
ios - 移动 map 时 MGLCalloutView 掉落 (Mapbox iOS)
平台:iOS (Swift)Mapbox SDK版本:3.6 嗨，我有一个自定义 MGLCalloutView，当我点击 MGLAnnotationView 时，标注会按预期显示在注释上方，但如果我稍
ios - com.apple.WebKit.WebContent 掉落 113 错误 : Could not find specified service
我正在使用 WKWebView 查看自定义 HTML。无论 HTML 内容如何，在真实设备上进行测试时，我都会在 Could not signal service com.apple.WebKi
ios - com.apple.WebKit.WebContent 掉落 113 错误 : Could not find specified service
我正在使用 WKWebView 查看自定义 HTML。无论 HTML 内容如何，在真实设备上进行测试时，我都会在 Could not signal service com.apple.WebKi

首页

博学

6Ren·AI

商城

css - 元素从标题后面掉落