【jQuery笔记Part2】02-jQuery展开&收起动画&帷幔效果案例&下拉菜单案例&显示隐藏更多案例&折叠菜单案例

最新推荐文章于 2023-05-24 13:16:04 发布
最新推荐文章于 2023-05-24 13:16:04 发布
阅读量690 收藏 6
点赞数
分类专栏： # jQuery笔记 文章标签： jQuery JavaScript overflow css jQuery动画
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43734095/article/details/100059841
版权

展开&收起动画&案例

jQuery笔记目录

HTML DOM overflow 属性

overflow 属性规定如何处理如何处理不符合元素框的内容。

Object.style.overflow=visible|hidden|scroll|auto
值描述
visible内容不会被修剪，会呈现在元素框之外。
hidden内容会被修剪，但是浏览器不会显示供查看内容的滚动条。
scroll内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto由浏览器决定如何显示。如果需要，则显示滚动条。

具体示例：菜鸟教程 CSS overflow 属性

展开 slideDown(毫秒, 完成回调函数)

$(this).slideDown(1000)

收起 slideUp(毫秒, 完成回调函数)

$(this).slideUp(1000);

切换 slideToggle(毫秒, 完成回调函数)

$('.wm').slideToggle(1000);

案例：帷幔效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {padding: 0;margin: 0;}
        .box {
            width: 646px;
            height: 363px;
            margin: 100px auto;
            border: 1px solid orange;
            position: relative;
            overflow: hidden;
        }
        .box p {
            width: 100%;
            height: 100%;
            text-align: center;
            line-height: 360px;
        }
        .left {
            background: url("images/weiman_left.jpg") no-repeat;
            width: 343px;
            height: 363px;
            position: absolute;
            top: 0;
            left: 0;
        }
        .right {
            background: url("images/weiman_right.jpg") no-repeat;
            width: 303px;
            height: 363px;
            position: absolute;
            top: 0;
            right: 0;
        }
    </style>
</head>
<body>
    <div class="box">
        <p>看什么看,关上!</p>
        <div class="wm left"></div>
        <div class="wm right"></div>
    </div>
<script type="text/javascript" src="lib/jquery-3.3.1.js"></script>
<script type="text/javascript">
    $(function () {
        $('body').click(function () { /*点击body部分，调用切换*/
            $('.wm').slideToggle(1000);
        });
        $('.left').click(function () {
            event.stopPropagation(); /*阻止传播，即阻止了点击body 的事件*/
            $(this).slideUp(1000);  /*点击左边的帷幕div，则向上滑动*/
        });
        $('.right').click(function () {
            event.stopPropagation(); /*阻止传播，即阻止了点击body 的事件*/
            $(this).slideUp(1000); /*点击右边的帷幕div，则向上滑动*/
        })
    });
</script>
</body>
</html>

运行效果：
点击左侧帷幕，则左侧帷幕上滑；
点击右侧帷幕，则右侧帷幕上滑；
点击没有帷幕的部分，则左右帷幕状态各自切换。
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

案例：下拉菜单

stop() 方法具体用法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery展开&收起动画案例-下拉菜单</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            list-style: none;
        }
        .firstNav {
            width: 600px;
            height: 44px;
            margin: 100px auto;
            border: 1px solid #cccccc;
            cursor: pointer; /*鼠标变为小手*/
        }

        .firstNav>li {
            width: 100px;
            float: left;
            text-align: center;
        }

        .firstNav>li>span {
            display: inline-block;
            width: 100%;
            height: 44px;
            line-height: 44px;
        }

        .secondNav {
            border: 1px solid #cccccc;
            border-top: none;
        }

        .secondNav>li {
            margin-top: 1px;
        }

        .secondNav {
            display: none;
        }

        .current .secondNav {
            display: block;
        }
    </style>
</head>
<body>
    <ul class="firstNav">
        <li class="current">
            <span>一级菜单1</span>
            <ul class="secondNav">
                <li>二级菜单1</li>
                <li>二级菜单2</li>
                <li>二级菜单3</li>
                <li>二级菜单4</li>
                <li>二级菜单5</li>
            </ul>
        </li>
        <li>
            <span>一级菜单1</span>
            <ul class="secondNav">
                <li>二级菜单1</li>
                <li>二级菜单2</li>
                <li>二级菜单3</li>
                <li>二级菜单4</li>
                <li>二级菜单5</li>
            </ul>
        </li>
        <li>
            <span>一级菜单1</span>
            <ul class="secondNav">
                <li>二级菜单1</li>
                <li>二级菜单2</li>
                <li>二级菜单3</li>
                <li>二级菜单4</li>
                <li>二级菜单5</li>
            </ul>
        </li>
        <li>
            <span>一级菜单1</span>
            <ul class="secondNav">
                <li>二级菜单1</li>
                <li>二级菜单2</li>
                <li>二级菜单3</li>
                <li>二级菜单4</li>
                <li>二级菜单5</li>
            </ul>
        </li>
        <li>
            <span>一级菜单1</span>
            <ul class="secondNav">
                <li>二级菜单1</li>
                <li>二级菜单2</li>
                <li>二级菜单3</li>
                <li>二级菜单4</li>
                <li>二级菜单5</li>
            </ul>
        </li>
        <li>
            <span>一级菜单1</span>
            <ul class="secondNav">
                <li>二级菜单1</li>
                <li>二级菜单2</li>
                <li>二级菜单3</li>
                <li>二级菜单4</li>
                <li>二级菜单5</li>
            </ul>
        </li>
    </ul>

<script type="text/javascript" src="lib/jquery-3.3.1.js"></script>
<script type="text/javascript">
    $(function () {
        // 1.1 先让第一个二级菜单隐藏
        $('.firstNav>li.current .secondNav').css('display','none');

        // 1.2 监听鼠标进入
        /*
        $('.firstNav>li').hover(function () {
            $(this).children('.secondNav').slideDown(200);
            $(this).siblings().children('.secondNav').slideUp(200);
        },function () {
            $(this).children('.secondNav').slideUp(200);
        })
        // 此段代码与下面的代码效果相同
        */
        $('.firstNav>li').hover(function () { // 给所有的一级菜单添加鼠标悬浮事件
            $(this).children('.secondNav').stop().slideToggle(200); // stop停止动画再调用切换，则只有当前元素有特效
        })

    });
</script>

</body>
</html>

运行效果：
鼠标停在哪个一级菜单，则这个一级菜单下拉二级菜单，鼠标移走则收回。
在这里插入图片描述

js 中 == 与 === 的区别

== 叫做相等运算符，只要值相等即可为真。
=== 叫做严格运算符，不仅要求值相等，类型也要求相等。

案例：显示隐藏更多

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery展开&收起动画案例-显示隐藏更多</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            list-style: none;
        }
        .box {
            width: 450px;
            border: 1px solid #ccc;
            margin: 100px auto;
            text-align: center;
        }
        .box ul {
            overflow: hidden;
        }
        .box ul>li {
            width: 150px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            float: left; /*设置浮动，不设置的话li会一排排显示*/
        }
        .box button {
            width: 150px;
            height: 30px;
            line-height: 30px;
            border: 1px solid #909EAB;
            text-align: center;
            margin: 10px 0;
        }
    </style>
</head>
<body>
<div class="box">
    <ul>
        <li>香蕉</li>
        <li>苹果</li>
        <li>梨子</li>
        <li>猕猴桃</li>
        <li>橙子</li>
        <li>桃子</li>
        <li>哈密瓜</li>
        <li>西红柿</li>
        <li>西瓜</li>
        <li>荔枝</li>
        <li>榴莲</li>
        <li>人生果</li>
    </ul>
    <button>显示更多</button>
</div>

<script type="text/javascript" src="lib/jquery-3.3.1.js"></script>
<script type="text/javascript">
    $(function () {
        // 1.设置默认的隐藏
        $('.box>ul>li:gt(2)').hide() /*大于2的li隐藏*/
        
        // 2.监听按钮的点击
        $('.box>button').click(function () {
            // 2.1 改变文字
            var text = $(this).text() === '显示更多' ? '隐藏': '显示更多';
            $(this).text(text);
            $('.box>ul>li:gt(2)').slideToggle(); /*大于2的li进行切换*/
        })
    });
</script>

</body>
</html>

运行效果：
默认只显示前三个；
点击显示更多，则显示全部，并且按钮改成隐藏；
点击隐藏，则只显示前三个，并且按钮改成显示更多。
在这里插入图片描述

在这里插入图片描述

案例：折叠菜单

CSS cursor 属性：一些不同的光标。

cursor 具体用法（菜鸟教程）

CSS3 transform 属性：旋转 div 元素

transform 具体用法（菜鸟教程）

end() 返回调用链的上一级。

即，将匹配的元素列表变为前一次的状态。end() 具体用法

find() 搜索所有与指定表达式匹配的元素

这个函数是找出正在处理的元素的后代元素的好方法。find() 具体用法

案例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery展开&收起动画案例-折叠菜单</title>
    <style>
        * {padding: 0;margin: 0;list-style: none;}
        .nav {width: 300px;margin: 100px auto;border: 1px solid orange;}
        .top {
            width: 300px;
            height: 30px;
            line-height: 30px;
            box-sizing: border-box;
            background: orange;
            border-bottom: 1px solid white;
            cursor: pointer;
        }
        .top .arrow {
            background: url("images/arrow_right.png") no-repeat;
            float: right;
            width: 16px;
            height: 16px;
            margin-top: 7px;
        }
        .list {
            width: 100px;
            display: none;
        }
    </style>
</head>
<body>

<ul class="nav">
    <li>
        <div class="top">
            <span class="arrow"></span>
            <span>一级菜单</span>
        </div>
        <div class="list">
            <ul>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
            </ul>
        </div>
    </li>
    <li>
        <div class="top">
            <span class="arrow"></span>
            <span>一级菜单</span>
        </div>
        <div class="list">
            <ul>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
            </ul>
        </div>
    </li>
    <li>
        <div class="top">
            <span class="arrow"></span>
            <span>一级菜单</span>
        </div>
        <div class="list">
            <ul>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
            </ul>
        </div>
    </li>
    <li>
        <div class="top">
            <span class="arrow"></span>
            <span>一级菜单</span>
        </div>
        <div class="list">
            <ul>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
            </ul>
        </div>
    </li>
</ul>

<script type="text/javascript" src="lib/jquery-3.3.1.js"></script>
<script type="text/javascript">
    $(function () {
        // 1. 监听li标签的点击
        $('.nav>li').click(function () {
            $(this).children('.list').slideDown().end().siblings().children('.list').slideUp();

            // 2. 处理箭头旋转
            $('.top .arrow').css({
                'transform': 'rotate(0deg)'
            });

            $(this).find('.arrow').css({
                'transform': 'rotate(90deg)'
            });
        })
    });
</script>
</body>
</html>

运行效果：
点击一级菜单，会产生二级菜单的下拉列表。
在这里插入图片描述

萌宅鹿同学
关注
专栏目录
20、JQuery实现动画（JQuery对象显示、隐藏、切换）
l0510402015的博客
05-13 353
三种方式显示和隐藏元素 1.默认显示和隐藏方式 1.show([speed,[easing],[fn]]) 1.参数： 1.speed：动画的速度。三个预定义的值("slow","normal", "fast")或表示动画时长的毫秒数值(如：1000) 2.easing：用来指定切换效果，默认是"swing"，可用参数"linear" * swin...
Jquery案例-下拉菜单
qq_43781887的博客
06-08 3200
需要实现的结构如下图： 关于布局： 布局采用ul里面包含4个li，li里面包含a标签（微博）以及ul（下面的下拉菜单），采用hover改变移动到下拉菜单后背景变色。关于功能： 首先利用jquery获取元素，然后给li添加mouseenter方法显示下面的下拉菜单，然后给li添加mouseleave方法离开后又隐藏下拉菜单。最终代码如下：...
jQuery框架实现元素显示及隐藏动画【附案例分析】
累计发表博客60余万字，CSDN 博客专家、Java 领域优质创作者、华为云享专家、阿里云专家博主。专注分享 Java 优质文章，毕设实战项目开发，全网粉丝10W+
06-09 1567
目录 一、默认方式显示和隐藏 二、滑动方式显示和隐藏 三、淡入淡出方式显示和隐藏 四、案例：广告的自动显示和隐藏 Hello，你好呀，我是灰小猿！一个超会写bug的程序猿！ 今天继续来和大家分享一下在jQuery高级开发中关于动画效果的简单实现！ 首先来看一个简单的动画效果图： 我之前也和小伙伴们讲过使用jQuery框架可以很好的对html中元素的属性等进行操作，所以上面显示和隐藏的也只是一个div，而并不是一个图片。下面我就来和小伙伴们讲一个如何对元素的属性进行操作，使其显示或者隐藏！
jQuery拉开关闭帷幕
weixin_33682790的博客
11-05 134
查看效果：http://keleyi.com/keleyi/phtml/jqtexiao/7.htm   HTML文件代码： 1 &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt...
jQuery的动画-显示和隐藏
bwf_erg的博客
01-05 259
显示和隐藏元素 1.show()：显示元素 2.hide()：隐藏元素 3.toggle()：显示和隐藏元素切换 这三个方法使用方法如下：以show方法为例： $(selector).show(speed,callback); 可选的 speed 参数规定显示的速度，可以取以下值："slow"、"fast"、"normal" 或毫秒。 slow表示600毫秒，normal表示400毫
jquery显示隐藏方法实现动画效果整理
IT羊的博客
01-02 303
jquery显示隐藏方法实现动画效果整理
09-jQuery-动画-显示和隐藏元素
最新发布
记录java学习日常~
05-24 2716
在 show() 方法中传入了动画时长 1000 毫秒和完成后的回调函数，表示需要在 1000 毫秒内以默认缓动类型将元素显示出来，动画完成后执行回调函数。在 slideUp() 方法中传入了动画时长 1000 毫秒和完成后的回调函数，表示需要在 1000 毫秒内以默认缓动类型将元素收缩，动画完成后执行回调函数。在 hide() 方法中传入了动画时长 1000 毫秒和完成后的回调函数，表示需要在 1000 毫秒内以默认缓动类型隐藏元素，动画完成后执行回调函数。
jQuery实现下拉菜单(点击显示/隐藏)
m0_63823390的博客
10-11 1787
jQuery实现下拉菜单(点击显示/隐藏)
25 个免费的 HTML5 CSS3 jQuery 下拉菜单
02-19
在创建下拉菜单时，jQuery可以帮助我们轻松实现菜单的动态行为，如响应用户点击事件、显示和隐藏下拉项、以及实现平滑的过渡效果。jQuery的链式调用和丰富的插件生态系统使得代码更加简洁高效。 这些免费的...
jsTreeSelect jquery 树形下拉菜单
07-22
jsTreeSelect是一款基于jQuery的插件，它能够将传统的下拉菜单转变为交互式的树形结构，为用户提供了更丰富的选择体验。这种树形下拉菜单在数据层级关系复杂时特别有用，用户可以通过展开和折叠节点来浏览和选择层次...
jquery实现隐藏与显示动画效果/输入框字符动态递减/导航按钮切换
01-21
已经有两年多没登陆csdn账号了，中间做了些旁的事，可是现在却还是回归程序，但改做前端了，虽然很多东西都已忘得差不多了，但还是应该摆正心态，慢慢来，在前端漫游，做一只快乐双鱼。 路是一步一步走出来的，知识是一点一滴积累的，记录是笔财富，来吧，一起学着总结做笔记。 这几天在写后台文章的一些页面，为了能得到更好的交互性，需要做一些效果，js无疑使不二之选，但由于浏览器的兼容性一直差强人意，所以选用jquery框架，通过css样式、dom节点以及自身所带函数就可以实现比较好的用户体验，此案例有三个功能点。分别为： 1.利用jquery自身的toggle（）函数实现层的隐藏与显示动画; 2.仿新浪、腾
jQuery flash开幕式放烟花拉幕动画效果特效代码
03-20
jQuery flash开幕式放烟花，点击左下方小手会拉开幕帘，几秒钟后自动跳转页面效果
unity 源码案例 折叠菜单.rar
01-14
unity 折叠菜单。 源码案例， 直接看代码即可。 代码简单， 直接拖入摄像机 即可使用。 适合初学者，不喜勿喷，谢谢支持。
用JavaScript来美化HTML的select标签的下拉列表效果
10-23
主要介绍了用JavaScript来美化HTML的select标签的下拉列表效果的方法,而且在多浏览器下的兼容效果也得到提升,需要的朋友可以参考下
jQuery拉幕效果
生有涯学无涯
07-05 1312
jQuery拉幕效果用几行代码就可以完成拉幕效果，直接上代码：<div id="ad" style="display:none;overflow: hidden;"><img src="大图片地址"></div>$("#ad").delay(1000).slideDown(1000).delay(2000).animate({height: "80px"}, 1000,function(){$(th
[jQuery基础] jQuery动效案例(三) -- 下拉菜单、折叠菜单
DeathDomain的博客
06-18 653
下拉菜单 实现效果展示 实现步骤 第一步(实现静态效果) CSS部分 *{ margin: 0; padding: 0; } .nav{ list-style: none; width: 300px; height: 50px; background: red; margin: 100px auto; cursor: pointer; } .nav>li{ width: 100px; height: 50px; line-height: 50px; text-align: center; flo
jQuery实现弹幕效果（鼠标单击和键盘回车键）
qq_56715703的博客
11-21 425
jQuery实现弹幕效果（鼠标单击和键盘回车键）
基于jQuery实现的拉开帷幕jQuery特效
weixin_33946020的博客
03-07 175
基于jQuery实现的拉开帷幕jQuery特效！超炫酷啊！可以做小吓人的图片在里面吓吓人哈哈哈！！ 下载地址:http://www.jqshare.com/Jq/fondone/id/54.html 转载请注明出处 转载于:https://blog.51cto.com/jqshare/1149046...
Jquery实现点击页面发送弹幕效果
BADAO_LIUMANG_QIZHI的博客
10-15 542
&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt; Jquery实现点击弹幕特效 &lt;/title&gt; &lt;m
jQuery 动画效果详解：显示、隐藏与滑动
"这篇学习笔记主要介绍了jQuery中的8种动画效果，特别关注了元素的显示与隐藏以及滑动效果的实现。" 在jQuery中，元素的显示和隐藏是动画效果的基础，通过改变`display`属性可以实现这一功能。`display:none`会隐藏...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

萌宅鹿同学

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值