jquery - 向上滑动页脚-6ren

jquery - 向上滑动页脚

转载作者：太空宇宙更新时间：2023-11-03 21:49:56

25

4

我想在悬停时制作一个向上滑动的页脚，并在页面底部粘贴一个页脚。我设法粘贴页脚并使其表现得像一个按钮，但它不会在悬停时向上滑动以显示页脚的内容。

这是我的代码:

<html>
<head>
<meta charset='UTF-8'>
<title>sliding footer</title>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js'></script>

<style>
html, body {
    height:100%;
    width:100%;
    margin:0;
    padding:0;
}

.slide { 
    border:1px solid black;
    width:100%; 
    height:150px; 
    display:none; 
    position:absolute;
    left: 0px;
    right:0px;
    bottom: 25px;   
}

.footer {
       position:absolute;
       bottom: 0px;
       height:25px;
       width: 100%;
       left: opx;
       right: 0px;
       border:1px solid black;
       display: inline-block;
       overflow: hidden;
       cursor:pointer;
           background:#FFE4E1;
    }
</style>
</head>


<body>              

<script type="text/javascript">

 $(".footer").hover(function () {
    $(this).children('.slide').slideToggle("fast");
  });

</script>

<div class="footer" > 
    Footer Button
   <div class="slide">

    <a href="#"> footer content 1</a>
    <a href="#"> footer content 2</a>
    <a href="#"> footer content 3</a>

   </div>
</div>

</body>
</html>

最佳答案

我更改了一些我不需要的 css JSFIDDLE并使其看起来略有不同。

JS:

 $(".footer").hover(function () {
    $(".slide").slideToggle("fast");
  });

HTML:

<div class="footer" > 
    <div class="slide">
        <a href="#"> footer content 1</a>
        <a href="#"> footer content 2</a>
        <a href="#"> footer content 3</a>
    </div>
    Footer Button   
</div>

CSS:

.slide { 
    border:1px solid black;
    height:125px;    
    left: 0px;
    right:0px;
    bottom: 25px;
    display: none;    
    position: absolute;
}

.footer {
       position:absolute;
       bottom: 0px;
       height:25px;
       width: 100%;       
       left: opx;       
       right: 0px;
       border:1px solid black;
       display: inline-block;       
       cursor:pointer;
       background:#FFE4E1;       
    }

关于jquery - 向上滑动页脚，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18132646/

25

4

0

文章推荐： node.js - Azure ServiceBus token 已过期

文章推荐： c# - 如何在 MVC4 中禁用特定操作\ Controller 的全局属性

文章推荐： node.js - nodejs 执行 scp 在控制台中显示进度

文章推荐： c# - ForEach 和 foreach

excel - 查找范围内第一次出现的值，向上
如果我有如下列， 1 2 2 1 3 4 5 我如何找到从已知值向上的特定数字的第一次出现，比如 4。我知道 4 在列中的位置，我希望第一次出现 1 的行号从 4 向上(行号 4在这种情况下)。我的
javascript - 向上/向下移动时在窗口中保留所选选项
我这里有一个 fiddle http://jsfiddle.net/BB3JK/47/我改编自上一个问题( How can I move selected option in multiselect
java - 向上/向下滚动时检查复选框缺失
大家好，我的应用程序遇到问题。我的复选框中的复选框，一旦我选中该复选框并向下/向上滚动，该复选框就消失了，我不知道这是怎么发生的。谁能帮我这个？谢谢您的帮助 :)这是我的代码: public clas
jquery - 向上/向下滚动到页面上的不同区域
我想使用 jQuery scrollTo 函数或其他一些类似的函数来实现以下功能，以达到相同的结果。我的页面上基本上会有一个 DIV 部分，其中包含大约 10 个类别 URL 链接。例如: div
jquery - 向上/向下滑动
我有这个标记 Sample 1 Sample 2 Sample 3 Sample 4
C# 向上/向下移动项目
我得到了一个包含项目的列表。他们都有一个“排序”列。排序列是int类型，并且是唯一的。场景: sort 1; sort 2; sort 3; 如果用户在列表中向上移动一个项目(例如排序 3)(例如到
JavaScript:向上/向下滚动时突出显示一行
在我的网页上，我在一个可滚动的 DIV 中放置了一个表格。当我向下滚动时，我想突出显示表格中最可见的中间行。我该怎么做？我发现以下脚本接近我的期望 --> www.rgagnon.com/jsd
python - 为什么训练期间损失曲线会出现大幅跳跃(向上)？
我已经训练了完全相同的模型(使用完全相同的训练数据集)两次，但结果非常不同，而且我对它们的损失曲线的行为感到困惑。第一个实验的损失曲线(红色曲线)在第一个时期结束时突然上升，然后缓慢稳定下降。但是
jquery - 向上/向下滑动下拉菜单
我希望主导航的子菜单在鼠标悬停时向下滑动并在鼠标移开时向上滑动。以下是我正在处理的页面:http://jaspreetkaur.com/marg-moll/ 以下是我尝试创建效果的 jQuery 代
ios - 向上/向下计数动画
我有一个 UIPageViewController，其中每个 VC 的中心都有一个数字。我希望当我从一个 View 滑动到另一个 View 时，数字将从 0 开始并向上计数，直到达到正确的数字(或者
Javascript 向上/向下计数脚本显示登录以来的时间
我一直在谷歌搜索，但找不到正确的脚本。也许有人可以指出我正确的方向？我需要显示用户自访问某个页面以来在网站上处于事件状态的时间。我正忙于测试站点，例如用户有 1 小时来完成测试，因此我需要显示用户忙
javascript - 向上/向下箭头滚动不起作用
向上/向下箭头滚动在 jquery scrollify 插件中不起作用。我想使用页面向上/向下按钮和向上/向下箭头按钮单击进行滚动。页面向上/向下箭头工作正常，正如我所期望的。向上/向下按钮单击不随着
javascript - 向上/向下计数数组动画
我想在按下左右箭头时使用数组创建一个上下计数动画。我有 3 个数组，每个箭头将链接到一个 ID。 var KEY = { LEFT: 37, RIGHT: 39 } $(function(
javascript - 向上/向下移动时颜色变化
我对那个 JS 有点问题.. - 有一个 divs 并且这是在随机变化的行中自动变化的... 我需要将向上移动的 div 的颜色更改为绿色.. div 正在向下移动以更改为红色.. 我尝试这样做，但我
javascript - 向上/向下键盘箭头自动滚动
我希望能够使用我的键盘键在 ul 列表中滚动。经过几次尝试后，我成功了。不幸的是，我遇到了一个很长的列表的问题。我希望能够通过提供 css 规则 overflow:auto; 来滚动浏览它们；键盘
jquery - 向上/向下滑动元素并在某个点折叠？
关闭。这个问题需要更多focused .它目前不接受答案。想改进这个问题吗？更新问题，使其只关注一个问题 editing this post . 关闭 7 年前。 Improve this q
c# - 当已经按下第二个键时如何检测键向下/向上
在我的应用程序中，我允许用户通过使用 ProcessCmdKey 按住右箭头键来滚动电影。现在我想让用户能够在需要时提高滚动速度。理想情况下，用户应该能够按住右箭头键，然后当他决定提高速度时，他应该在
Android smoothScrollToPosition 向上
我已经在 listview 上设置了 smoothScrollToPosition 并且效果很好!但是...我宁愿将位置放在 listview 的顶部，而不是仅仅放在屏幕上(如果需要向下滚动，则主要放
jquery - 向上/向下滚动到带有固定按钮的部分
我想构建一个脚本来向上/向下滚动到页面的部分标记。我的源代码如下所示: HTML: UP DOWN First Second Third Fourth CSS: section{
c# - ComboBox 向上/向下箭头键在项目重新填充后发出
我正在使用 Google 搜索结果实现创建一个自定义 ComboBox 控件，但我在使用箭头键时遇到了一些问题。问题详情请观看此视频，因为我演示了向上和向下箭头键的问题，并查看输出面板。 http

首页

博学

6Ren·AI

商城

jquery - 向上滑动页脚