我有一个容器(宽度 500 像素,高度 800 像素)。容器使用图像作为背景,我想在中间添加一个按钮,上面写着“注册”。当用户点击注册按钮时,我想要一个在同一个容器中弹出的注册表单。
换句话说,我需要一种翻转效果,其中背景颜色会更改为其他颜色,并且同一容器用于注册框。而且我需要保留转换,直到用户点击关闭按钮或类似按钮。
我怎样才能做到这一点?任何想法将不胜感激。谢谢!
最佳答案
您可以将 2 个容器放在彼此的顶部,然后淡入/淡出顶部的容器 - DEMO
HTML
<section>
<div id="lower">
<button> Close </button>
</div>
<div id="upper">
<button> Sign up </button>
</div>
</section>
CSS
div {
position: absolute;
left: 20px;
top: 20px;
height: 300px;
width: 400px;
line-height: 300px;
text-align: center;
}
#lower { background: honeydew; }
#upper { background: beige; }
jQuery
$("#upper button").on("click", function() {
$("#upper").fadeOut(300);
});
$("#lower button").on("click", function() {
$("#upper").fadeIn(300);
});
关于javascript - 如何为图像框创建翻转?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13573091/