我的情况有些复杂:
这是一个尝试解释它的 fiddle :http://jsfiddle.net/sqSj9/1/
我想做的是将三个 div 放在固定位置,左、上和右边距为负(如此隐藏),只要我点击一个按钮,它们就会以动画方式出现在页面中间。我开始在一个单独的文件夹中进行尝试,它运行良好。我得到了你可以在 fiddle 中看到的结果,(所以是的, fiddle 就是我想要完成的)
但是一旦我将代码放入我的实际网站代码中,首先点击时什么也没有出现,所以动画不起作用。
当我删除 position:fixed
时,动画开始出现,但是出现的 div 插入了后面的 div,所以让我们在 fiddle 中说:白色 div 将灰色 div 推到底部,而不是隐藏它。
所以我最后的解决方案是放置 position:absolute
。当我这样做时,动画工作正常,但问题是现在,当我点击按钮时,div 是动画的但不填满我的浏览器的大小,这意味着,假设我已经向下滚动了一点此外,当我单击按钮进行动画处理时,动画发生了,但我看不到它。我必须再次向上滚动才能看到它。
这是另一个 fiddle 来说明我的意思。向下滚动并尝试:http://jsfiddle.net/6xJhC/3/
所以我确定我的初始代码有问题,我不应该添加的东西,但我无法弄清楚它是什么!以下是我的代码的相关部分:
我的 html:
<?php include 'header.php';?>
<!-- this is where the header ends and index starts-->
<div id="container">
<div id="intro">
<!-- some content-->
</div>
<div id="content">
<section id="def">
<!-- some content-->
</section>
<div id="selected-program">
<div id="top">
<!-- some content-->
</div>
<div id="left">
<!-- some content-->
</div>
<div id="right">
<!-- some content-->
</div>
</div>
<section id="program">
<button id="click" value="click Me"> click me </button>
<!-- some content-->
</section>
<section id="rec">
<!-- some content-->
</section>
<section id="testi">
<!-- some content-->
</section>
<section id="contact">
<!-- some content-->
</section>
<?php include 'footer.php';?>
我的代码:
<script type="text/javascript">
$(document).ready(function(){
var allowScroll = true;
$("body").on('mousewheel DOMMouseScroll',function(e){ // this code prevents scrolling whenever the button is clicked is clicked
if (!allowScroll){
e.preventDefault();
}
});
$("#click").click(function(){
$("#top").animate({marginTop:'0px'},200);
$("#left").animate({marginLeft:'0px'},200);
$("#right").animate({marginRight:'0px'},200);
});
});
</script>
我的CSS:
body, html{
margin:0;
padding:0;
background: #fff;
margin-bottom: 25px;
overflow-x: hidden;
}
#container{
padding-top:80px;
}
#intro{
background:url(images/main.jpg) no-repeat;
background-size: cover;
height:492px;
color: #fff;
position:fixed;
z-index: 0;
width:100%;
}
#content{
z-index: 600;
position: relative;
margin-top: 492px;
background: #fff;
}
#program {
height:700px;
}
#rec{
height:140px;
background: #f6f6f6;
}
#recommand{
width:490px;
padding-top:20px;
margin:auto;
height:100px;
}
#testi {
height:700px;
}
section{
border-bottom:1px solid;
border-color:#eee;
padding-left:130px;
}
#selected-program{
z-index: 100000;
}
#top{
width:100%;
height:80px;
margin-top:-120px;
background: #f6f6f6;
position:absolute;
border-top:1px solid #eee;
border-bottom:1px solid #eee;
}
#left{
left:0%;
margin-left:-859px;
padding-left:130px;
padding-top:30px;
width:860px;
height:603px;
margin-top:80px;
float:left;
position:absolute;
background:#fff;
}
#right{
right:0%;
margin-right:-449px;
float:right;
height:633px;
width:449px;
margin-top:80px;
border-left:1px solid #eee;
position:absolute;
background: #fff;
}
因此,我们将不胜感激任何帮助。
提前致谢。
最佳答案
好的,让我们看看这里,这没有使用您的代码,我知道这行得通!
所以我们将要隐藏的div
设置到position: fixed;
然后使用left
将它们隐藏起来,右
和顶部
。
从这里开始就像设置一些 jQuery(或 Javascript).click
来告诉隐藏的 div
出来一样简单。简单如。
因此,单击屏幕上的任意位置以调出隐藏的 div
,然后再次单击以隐藏它们。向下滚动并单击它们将仍然在屏幕上,因为我们 position: fixed
。
弄乱它以了解它的工作原理等。
注意: 对于我的动画,我使用了 CSS transition
。
HTML:
<div></div>
<div></div>
<div></div>
<div>Scroll Down and Click</div>
<div>Scroll Down and Click</div>
<span></span>
CSS:
html, body {
margin: 0;
}
div:nth-child(1) {
width: 200px;
height: 400px;
border: 1px solid;
background: #ddd;
position: fixed;
left: -401px;
-webkit-transition: left 2s;
transition: left 2s;
}
div:nth-child(2) {
width: 400px;
height: 200px;
border: 1px solid;
background: #ddd;
position: fixed;
top: -401px;
left: 0;
right:0;
margin: auto;
-webkit-transition: top 2s;
transition: top 2s;
}
div:nth-child(3) {
width: 200px;
height: 400px;
border: 1px solid;
background: #ddd;
position: fixed;
right: -401px;
-webkit-transition: right 2s;
transition: right 2s;
}
div:nth-child(4) {
width: 100%;
height: 500px;
border: 1px solid;
background: blue;
}
div:nth-child(5) {
width: 100%;
height: 500px;
border: 1px solid;
background: purple;
}
span {
height: 1000px;
width: 100%;
display: block;
position: absolute;
top: 0;
}
jQuery:
$("span").click(function () {
var clicks = $(this).data('clicks');
if (clicks) {
$("div:nth-child(1)").css("left", "-401px");
$("div:nth-child(2)").css("top", "-401px");
$("div:nth-child(3)").css("right", "-401px");
} else {
$("div:nth-child(1)").css("left", "0");
$("div:nth-child(2)").css("top", "0");
$("div:nth-child(3)").css("right", "0");
}
$(this).data("clicks", !clicks);
});
关于css - 将 div 固定在具有负边距的特定位置,然后在单击按钮时对其进行动画处理。,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22555160/