Jquery幻灯片从页面底部向上分割
到目前为止，我在页面底部固定了一个div，底部边距设置为负数，以便将其大部分隐藏在屏幕下方。我想创建一个Jquery按钮，使它可以滑到页面上，但我迄今为止尝试的所有方法都没有奏效。我在这方面没有太多经验，所以我可能一直在做这件事 无论如何，这里是我的CSS：Jquery幻灯片从页面底部向上分割,jquery,html,css,Jquery,Html,Css,到目前为止，我在页面底部固定了一个div，底部边距设置为负数，以便将其大部分隐藏在屏幕下方。我想创建一个Jquery按钮，使它可以滑到页面上，但我迄今为止尝试的所有方法都没有奏效。我在这方面没有太多经验，所以我可能一直在做这件事 无论如何，这里是我的CSS： .foot { border-top: 1px solid #999999; position:fixed; width: 600px; z-index: 10000; text-align:cent
.foot {
border-top: 1px solid #999999;
position:fixed;
width: 600px;
z-index: 10000;
text-align:center;
height: 500px;
font-size:18px;
color: #000;
background: #FFF;
display: flex;
justify-content: center; /* align horizontal */
border-top-left-radius:25px;
border-top-right-radius:25px;
right: 0;
left: 0;
margin-right: auto;
margin-left: auto;
bottom: -475px;
}
<div class="foot">
Copyright 2014 © Tom Gibbs web design. <div class="clocker">hi</div>
<br />
<br />
Line 1<br />
Line 2<br />
Line 3<br />
Line 4
</div>
版权所有2014&复印件；汤姆·吉布斯网页设计。你好
第1行
第2行
第3行
第4行
<script>
$(document).ready(function(){
$(".clocker").click(function(){
$(".foot").slideUp(2000);
});
});
</script>
$（文档）.ready（函数（）{
$（“.clocker”）。单击（函数（）{
美元（“.foot”）。slideUp（2000年）；
});
});
.slide-up
{
bottom: 0px !important;
}
.slide-down
{
bottom: -475px !important;
}
$(document).ready(function() {
$('.foot').click(function() {
if($('.foot').hasClass('slide-up')) {
$('.foot').addClass('slide-down', 1000, 'easeOutBounce');
$('.foot').removeClass('slide-up');
} else {
$('.foot').removeClass('slide-down');
$('.foot').addClass('slide-up', 1000, 'easeOutBounce');
}
});
});
更新的我相信这是您想要的： 我还对您的Css进行了一些更改：
.foot {
border-top: 1px solid #999999;
position:fixed;
width: 600px;
z-index: 10000;
text-align:center;
/*height: 500px;*/
font-size:18px;
color: #000;
background: #FFF;
display: flex;
justify-content: center; /* align horizontal */
border-top-left-radius:25px;
border-top-right-radius:25px;
right: 0;
left: 0;
margin-right: auto;
margin-left: auto;
bottom: 0;
}
$(document).ready(function(){
$(".clocker").click(function(){
if($(".foot").css('bottom') == '0px'){
$(".foot").animate({bottom:'300px'},1000);
}
else
{
$(".foot").animate({bottom:'0px'},1000);
}
});
});
滑上
.集装箱{
位置：绝对位置；
顶部：0px；
左：0px；
底部：0px；
右：0px；
宽度：80%；
高度：600px；
边框：1px纯黑；
保证金：自动；
}
menuB先生{
位置：绝对位置；
宽度：100%；
身高：0；
左：0；
底部：0；
/*变换原点：100%100%*/
背景：2196F3；
不透明度：0；
溢出：隐藏；
}
.点击我{
位置：绝对位置；
边际上限：0；
右：0；
宽度：100%；
高度：30px；
背景色：#2196F3；
颜色：白色；
文本对齐：居中；
光标：指针；
}
单击
var不透明度_状态=假；
$（'.clickMe'）。在（'click'，函数（）{
//身体。。。
如果（不透明度_状态===false）{
$（“.menuB”）
.制作动画({
不透明度：1
}, 100)
.制作动画({
高度：'250px'
}, 1500 );
不透明度状态=真；
}否则{
$（“.menuB”）
.制作动画({
身高：0
}, 1500)
.制作动画({
不透明度：0
}, 2000 );
不透明度状态=假；
}
});
slideDown（）top:0，即可更改上下文菜单的滑动方向或底部：0，取决于我想走哪条路
还有一个js小提琴：
$（'.option'）。单击（函数（evObject）{
$（“#contextContainer”）。向下滑动（2500）；
});
#contextContainer{
显示：无；
背景颜色：绿色；
身高：100%；
宽度：100%；
位置：绝对位置；
底部：0；
z指数：10；
不透明度：90%；
填充：50px；
}
点击我
上下文菜单Jquery代码在哪里？正如我所说，我无法远程接近任何东西，但我添加了我已经在edit中尝试过的代码，这是我迄今为止尝试的唯一Jquery代码。其余的都是CSS技巧，但效果不太好。我宁愿使用Jqueryanyway@user3779981如果有一个单独的容器/模式可以向上滑动，而不是向上滑动以显示页脚中的其余内容，那么效果会更好吗？通过这种方式，您可以不使用页脚，根据需要向上滑动另一个容器/模式。它能工作，但我不能让它再下去了。它工作得很好，谢谢。如果用户再次单击，是否很难使其再次下降？@user3779981当然，已修复。此外，您还可以随意使用jQuery UI的不同放松类型，而不仅仅是bounce，我真的很喜欢bounce效果。我以前没有实际使用过这些Jquery UI效果，但我现在肯定要使用！更简短的是$（function（）{$（'#dev module toolbar'）。单击（function（）{if（$（this）.hasClass（$（this.slide-up'））{$（this.toggleClass（$（slide-down），（slide-up））；}或者{$（this.toggleClass（$（slide-up），（slide-down'）；}）；您的原始演示可以通过在html中单击来完成；）
$(document).ready(function(){
$(".clocker").click(function(){
if($(".foot").css('bottom') == '0px'){
$(".foot").animate({bottom:'300px'},1000);
}
else
{
$(".foot").animate({bottom:'0px'},1000);
}
});
});
<!DOCTYPE html>
<html>
<head>
<title>Slide Up</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<style type="text/css">
.container {
position: absolute;
top:0px;
left:0px;
bottom:0px;
right:0px;
width:80%;
height:600px;
border:1px solid black;
margin:auto;
}
.menuB{
position:absolute;
width:100%;
height:0;
left:0;
bottom:0;
/*transform-origin:100% 100%;*/
background:#2196F3;
opacity:0;
overflow:hidden;
}
.clickMe{
position: absolute;
margin-top: 0;
right: 0;
width: 100%;
height: 30px;
background-color: #2196F3;
color: white;
text-align: center;
cursor: pointer;
}
</style>
<body>
<div class="container">
<div class="menuB">
</div>
<p class="clickMe">Click</p>
</div>
<script type="text/javascript">
var opacity_status = false;
$('.clickMe').on('click', function () {
// body...
if (opacity_status === false) {
$('.menuB')
.animate({
opacity: 1
}, 100)
.animate({
height: '250px'
}, 1500 );
opacity_status = true;
}else{
$('.menuB')
.animate({
height : 0
}, 1500)
.animate({
opacity: 0
}, 2000 );
opacity_status = false;
}
});
</script>
</body>
</html>