个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
24
4
我有一个简单的代码，可以从中心水平和垂直扩展一个 div，但它只扩展到左侧或底部，我希望它从中心扩展到两侧(左=50px，右=50px)或(顶部=50px，底部=50px)总计等于100px。这里的代码:
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color:#bca;
background: #fff;
position: absolute;
top: 50%;
left: 50%;
background-repeat: no-repeat;
background-position: center center;
border:1px solid green;
padding:10px;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<button id="go">» Run</button>
<div id="block">Hello!</div>
<script>
$("#go").click(function(){
$("#block").animate({
width: "100px",
height: "100px",
opacity: 0.6,
}, 1500 );
});
</script>
</body>
谢谢。
最佳答案
这个怎么样？
HTML
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<button id="go">» Run</button>
<div id="block">Hello!</div>
</body>
CSS
div {
background-color:#bca;
background: #fff;
position: absolute;
top: 0px;
left: 0px;
margin-left: 50%;
margin-top: 50%;
background-repeat: no-repeat;
background-position: center center;
border:1px solid green;
padding:10px;
}
jQuery
$("#go").click(function(){
$("#block").animate({
width: "100px",
height: "100px",
top: "-50px",
left: "-50px",
opacity: 0.6,
}, 1500 );
});
http://jsfiddle.net/theguywholikeslinux/87f4Y/
我使用 margin-left 和 margin-top 来居中并设置 top: 和 left: 值的动画，使盒子向上和向左以及向下和向右增长。
如果您希望“Hello”也位于框的中央，您可能需要添加一些额外的 CSS。
关于css - 为 div 设置动画并从中心展开，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6675491/
24
4
0
如何在代码中展开/折叠WPF扩展器？我需要这样做才能在其中初始化控件。 最佳答案 使用IsExpanded属性，将其设置为true以使内容可见: myExpander.IsExpanded = tru
Powershell 展开让我发疯。 我有以下代码可以从交换收件人处检索电子邮件地址。我使用 ArrayList 是因为当您希望能够从数组中删除项目时，很多人都建议使用它。 $aliases = Ne
是否可以展开/折叠数据表中的子表？我的子表包含与其上方行相关的信息，我想显示/隐藏图像的点击。只是想知道我会怎么做？ 这是我目前使用的:
我正在尝试创建一个可扩展的文本区域，仅当该框为空时，该区域才会折叠回其原始高度。如果它不为空，那么我希望文本区域保持扩展并根据需要增长(即，当用户输入更多文本时增长)。文本区域永远不应该隐藏输入的文本
当尝试将 nestedSortable jQuery 插件与其网站上提供的示例一起使用时，该插件无法正常工作。 拖放可以工作，但是当我需要折叠/展开时就会出现问题。我使用了另一个问题中建议的解决方案，
我有一个显示嵌套数据的表。数据如下所示: Objective 1 Objective 1.1 Objective 1.1.1 Objective 1.2
我正在使用 jQuery 从屏幕左侧展开/缩回菜单栏。 这是我到目前为止所拥有的: $(document).ready(function(){ $('.menu-button').on("clic
如何根据类别向页面上的图像添加隐藏/显示(折叠/展开)功能？ 我希望具有特定类的图像在加载时折叠，并在 JS 中定义一些任意标记(比方说， Show )，然后在扩展中具有不同的任意标记( Hide )
我需要在折叠和展开后触发事件调整大小。当我尝试使用 SWT.Collapse 和 SWT.Expand 执行此操作时，树上没有任何更改，因为它在发生之前就已触发。有什么办法吗？ 最佳答案 尝试调用 D
我有一个如下所示的域: package object tryme { type ALL = AlarmMessage :+: PassMessage :+: HeyMessage :+: CNil
我有一个扩展器列表，我想用全局切换按钮控制其展开状态(IsExpanded)，该按钮应该在展开/折叠状态之间切换。 到目前为止，我得到的解决方案是通过将扩展器的 IsExpanded 状态绑定(bin
我试图根据 QWidget 是否展开/折叠来自动调整其大小。我尝试了几种发布的方法here和 here . 我没有设法采用这些，以便它按照我想要的方式工作:我希望 QWidget 在展开时调整自身大小
我正在尝试显示对象模型(机器人)列表，这些模型有一个可以是另一个机器人的字段 Parent。 我已经使用 Django 的 MPTT 实现了一个嵌套列表: {% load mptt_tags %}
鉴于下表/代码，我想添加两项。我不太了解 JavaScript，这段代码是另一个程序员留下的。该代码在所有其他方面都按预期工作。 这是两个项目: 表格应该以折叠状态开始。所有节点都应该是崩溃到“祖 p
我想要一张可以展开或折叠的表格。我的要求是当我点击表格行然后隐藏行显示或者当我点击其他表格行然后上一个打开的行隐藏或显示相对隐藏行。我发现一个 jquery jxpand 非常适合我，它显示隐藏的行但
如果当您向下滚动页面时元素展开或折叠，页面会突然重置并且焦点会移动到页面顶部。 有什么方法可以防止页面移动或使其不那么突然？ $(document).ready(function () {
我正在使用以下代码来扩展特定的线性布局，并且遵循了本教程 http://gmariotti.blogspot.sg/2013/09/expand-and-collapse-animation.html
当垂直偏移超过特定阈值时，如何使android中的可折叠工具栏自动折叠/展开？ 例如，如果垂直偏移超过 getScrollRange() 的半点，则可折叠工具栏应自动展开，低于该阈值时应折叠。 最佳答
http://t-webdesign.co.uk/new/ 如何在不使用固定高度属性的情况下让灰色 div (#content_right) 扩展到与左侧 div 相同的大小？ 谢谢 最佳答案 你可能
设置一个简单的 WordPress 博客，仅包含一个页面，即博客存档。但我遇到了一个问题，我想要切换摘录和内容显示更多/显示更少的功能，以便访问者可以轻松浏览同一页面上的帖子，而无需页面重新加载或被发
我是一名优秀的程序员,十分优秀！