jQuery 基础整理 31-40

最新推荐文章于 2024-05-21 14:15:14 发布

blackkerword

最新推荐文章于 2024-05-21 14:15:14 发布

阅读量58

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/blackkerword/article/details/119517906

版权

31. jQuery显示和隐藏动画

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery</title>
</head>
<script src="public/jquery-1.9.1.min.js"></script>
<style>
    *{
        margin: 0px;
        padding: 0px;
    }
    div{
        width: 200px;
        height: 200px;
        background: red;
        display: none;
    }
</style>
<script>
    $(function () {
        $("button").eq(0).click(function () {
            //$("div").css("display","block")
            //作用：动画执行完毕之后调用
            $("div").show(1000,function () {
                alert("显示动画执行完毕")
            })
        })
        $("button").eq(1).click(function () {
            //$("div").css("display","none")
            $("div").hide(1000,function () {
                alert("隐藏动画执行完毕")
            })
        })
        $("button").eq(2).click(function () {
            $("div").toggle(1000,function () {
                alert("切换完毕")
            })
        })
    });
</script>
<body>
    <button>显示</button>
    <button>隐藏</button>
    <button>切换</button>
    <div></div>
</body>
</html>

32. 对联广告（下拉网页滚动条显示广告）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery</title>
</head>
<script src="public/jquery-1.9.1.min.js"></script>
<style>
    *{
        margin: 0px;
        padding: 0px;
    }
    .left{
        width: 100px;
        height: 200px;
        float: left;
        position: fixed;
        left: 0px;
        top: 200px;
    }
    .right{
        width: 100px;
        height: 200px;
        float: right;
        position: fixed;
        right: 0px;
        top: 200px;
    }
    img{
        display: none;
    }
</style>
<script>
    $(function () {
        //1.监听网页的滚动
        $(window).scroll(function () {
           //1.1 获取网页滚动的偏移位
            var offset = $("html,body").scrollTop();
            //1.2 判断网页是否滚动到了指定的位置
            if(offset >= 500){
                $("img").show(1000)
            }else{
                $("img").hide(1000)
            }
        })
    });
</script>
<body>
    <img src="https://img1.baidu.com/it/u=3694053003,1912698683&fm=26&fmt=auto&gp=0.jpg" class="left">
    <img src="https://img1.baidu.com/it/u=4268324981,3384091170&fm=26&fmt=auto&gp=0.jpg" class="right">
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
</body>
</html>

33. jQuery展开和收起动画

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery</title>
</head>
<script src="public/jquery-1.9.1.min.js"></script>
<style>
    *{
        margin: 0px;
        padding: 0px;
    }
    div{
        width: 100px;
        height: 300px;
        background: red;
        display: none;
    }
</style>
<script>
    $(function () {
        $("button").eq(0).click(function () {
            $("div").slideDown(1000,function () {
                alert("展开完毕")
            })
        })
        $("button").eq(1).click(function () {
            $("div").slideUp(1000,function () {
                alert("收起完毕")
            })
        })
        $("button").eq(2).click(function () {
            $("div").slideToggle(1000,function () {
                alert("切换完毕")
            })
        })
    });
</script>
<body>
<button>展开</button>
<button>收起</button>
<button>切换</button>
<div></div>
</body>
</html>

34. 折叠菜单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery</title>
</head>
<script src="public/jquery-1.9.1.min.js"></script>
<style>
    *{
        margin: 0px;
        padding: 0px;
    }
    .nav{
        list-style: none;
        width: 300px;
        margin: 100px auto;
        /*border: 1px solid #000;*/
    }
    .nav>li{
        border: 1px solid #000;
        line-height: 35px;
        border-bottom: none;
        text-indent: 2em;
    }
    .nav>li:last-child{
        border: 1px solid #000;
        border-bottom-right-radius: 10px;
        border-bottom-left-radius: 10px;
    }
    .nav>li:first-child{
        border-top-right-radius: 10px;
        border-top-left-radius: 10px;
    }
    .sub>li{
        list-style: none;
        background: mediumpurple;
        border-bottom: 1px solid white;
    }
    .sub>li:hover{
        background: red;
    }
    .sub{
        display: none;
    }
</style>
<script>
    $(function () {
        //1. 监听一级菜单的点击事件
        $(".nav>li").click(function () {
            //1.1 拿到二级菜单
            var sub = $(this).children(".sub");
            //1.2 让二级菜单展开
            sub.slideToggle(1000);
            //1.3拿到所有非当前的二级菜单
            var otherSub = $(this).siblings().children(".sub");
            //1.4让所有非当前的二级菜单收起
            otherSub.slideUp(1000);


        })
    });
</script>
<body>
    <ul class="nav">
        <li>一级菜单<span></span>
            <ul class="sub">
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
            </ul>
        </li>
        <li>一级菜单<span></span>
            <ul class="sub">
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
            </ul>
        </li>
        <li>一级菜单<span></span>
            <ul class="sub">
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
            </ul>
        </li>
        <li>一级菜单<span></span>
            <ul class="sub">
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
            </ul>
        </li>
        <li>一级菜单<span></span>
            <ul class="sub">
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
            </ul>
        </li>
        <li>一级菜单<span></span>
            <ul class="sub">
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
            </ul>
        </li>
        <li>一级菜单<span></span>
            <ul class="sub">
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
            </ul>
    </ul>
</body>
</html>

35. 下拉菜单（有bug）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery</title>
</head>
<script src="public/jquery-1.9.1.min.js"></script>
<style>
    *{
        margin: 0px;
        padding: 0px;
    }
    .nav{
        list-style: none;
        width: 300px;
        height: 50px;
        background: red;
        margin: 100px auto;
    }
    .nav>li{
        width: 100px;
        height: 50px;
        line-height: 50px;
        text-align: center;
        float: left;
    }
    .sub{
        list-style: none;
        background: mediumpurple;
        display: none;
    }
</style>
<script>
    $(function () {
        /*
        在jQuery中如果需要执行动画，建议在执行动画之前先调用stop（）方法，然后在执行动画
         */
        //1. 监听一级菜单的移入事件
        $(".nav>li").mouseenter(function () {
          //1.1 拿到二级菜单
            var sub = $(this).children(".sub");
          //停止当前正在运行的动画
            sub.stop();
          //1.2 让二级菜单展开
            sub.slideDown(1000);
        })
        //2. 监听一级菜单的移出事件
        $(".nav>li").mouseleave(function () {
            //1.1 拿到二级菜单
            var sub = $(this).children(".sub");
            //停止当前正在运行的动画
            sub.stop();
            //1.2 让二级菜单收起
            sub.slideUp(1000);
        })
    });
</script>
<body>
    <ul class="nav">
        <li>一级菜单
            <ul class="sub">
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
            </ul>
        </li>
        <li>一级菜单
            <ul class="sub">
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
            </ul>
        </li>
        <li>一级菜单
            <ul class="sub">
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
            </ul>
        </li>
    </ul>
</body>
</html>

36. jQuery淡入淡出动画

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery</title>
</head>
<script src="public/jquery-1.9.1.min.js"></script>
<style>
    *{
        margin: 0px;
        padding: 0px;
    }
    div{
        width: 300px;
        height: 300px;
        background: red;
        display: none;
    }
</style>
<script>
    $(function () {
        $("button").eq(0).click(function () {
            $("div").fadeIn(1000,function () {
                alert("淡入完毕");
            })
        })
        $("button").eq(1).click(function () {
            $("div").fadeOut(1000,function () {
                alert("淡出完毕");
            })
        })
        $("button").eq(2).click(function () {
            $("div").fadeToggle(1000,function () {
                alert("切换完毕");
            })
        })
        $("button").eq(3).click(function () {
            $("div").fadeTo(1000,0.5,function () {
                alert("淡入到");
            })
        })
    });
</script>
<body>
<button>淡入</button>
<button>淡出</button>
<button>切换</button>
<button>淡入到</button>
<div></div>
</body>
</html>

37. 弹窗广告

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery</title>
</head>
<script src="public/jquery-1.9.1.min.js"></script>
<style>
    *{
        margin: 0px;
        padding: 0px;
    }
    .ad{
        position: fixed;
        right: 0px;
        bottom: 0px;
        width: 300px;
        height: 200px;
        display: none;
    }
    .ad>span{
        display: inline-block;
        width: 30px;
        height: 30px;
        background: red;
        position: absolute;
        top: 0px;
        right: 0px;
    }
</style>
<script>
    $(function () {
        //1.监听span的点击事件
        $("span").click(function () {
            $(".ad").remove();
        })
        //2.执行图片升起动画
        /*
        $(".ad").slideDown(1000,function () {
            $(".ad").fadeOut(1000,function () {
                $(".ad").fadeIn(1000);
            });
        });
        */
        $(".ad").stop().slideDown(1000).fadeOut(1000).fadeIn(1000);
    });
</script>
<body>
    <div class="ad">
        <img src="https://img0.baidu.com/it/u=3643222036,2137679457&fm=26&fmt=auto&gp=0.jpg" alt="">
        <span></span>
    </div>
</body>
</html>

38. jQuery自定义动画

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery</title>
</head>
<script src="public/jquery-1.9.1.min.js"></script>
<style>
    *{
        margin: 0px;
        padding: 0px;
    }
   div{
       width: 100px;
       height: 100px;
       margin-top: 10px;
       background: red;
   }
    .two{
        background: blue;
    }
</style>
<script>
    $(function () {
        $("button").eq(0).click(function () {
            /*
            $(".one").animate({
                width:500
            },1000,function () {
                alert("自定义动画执行完毕")
            })*/
            $(".one").animate({
                marginLeft : 500
            },5000,function () {
                //alert("自定义动画执行完毕")
            })
            /*
            第一个参数：接受一个对象，可以在对象中修改属性
            第二个参数：指定动画时长
            第三个参数：指定动画节奏 默认是swing
            第四个参数：动画执行完毕之后的回调函数
             */
            $(".two").animate({
                marginLeft : 500
            },5000,"linear",function () {
                //alert("自定义动画执行完毕")
            })
        })
        $("button").eq(1).click(function () {
            $(".one").animate({
                width : "+=100"
            },1000,function () {
                //alert("自定义动画执行完毕")
            })
        })
        $("button").eq(2).click(function () {
            $(".one").animate({
                width : "hide"
            },1000,function () {
                //alert("自定义动画执行完毕")
            })
            $(".two").animate({
                width : "toggle"
            },1000,function () {
                //alert("自定义动画执行完毕")
            })

        })
    });
</script>
<body>
    <button>操作属性</button>
    <button>累加属性</button>
    <button>关键字</button>
    <div class="one"></div>
    <div class="two"></div>
</body>
</html>

39. jQuery的stop和delay方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery</title>
</head>
<script src="public/jquery-1.9.1.min.js"></script>
<style>
    *{
        margin: 0px;
        padding: 0px;
    }
    .one{
        width: 100px;
        height: 100px;
        background: red;
    }
    .two{
        width: 500px;
        height: 10px;
        background: blue;
    }
</style>
<script>
    $(function () {
        $("button").eq(0).click(function () {
            /*
               在jQuery的{}中可以同时修改多个属性，多个属性的动画也会同时执行
             */
            /*
            $(".one").animate({
                width:500,
                //height: 500
            },1000)
            $(".one").animate({
                //width:500,
                height: 500
            },1000)*/
            //delay方法的作用就是告诉系统延迟的时长
            // $(".one").animate({
            //     width:500,
            //     //height: 500
            // },1000).delay(2000).animate({
            //     //width:500,
            //     height: 500
            // },1000)
            $(".one").animate({
                width:500,
                //height: 500
            },1000)
            $(".one").animate({
                //width:500,
                height: 500
            },1000)
            $(".one").animate({
                width:100,
                //height: 500
            },1000)
            $(".one").animate({
                //width:500,
                height: 100
            },1000)

        })
        $("button").eq(1).click(function () {
            //立即停止当前动画，继续执行后续动画
            //$("div").stop()
            //$("div").stop(false);
            //$("div").stop(false,false);

            //立即停止当前和后续的所有动画
            //$("div").stop(true)
            //$("div").stop(true,false)

            //立即完成当前的，继续执行后续动画
            $("div").stop(false,true)

            //立即完成当前的，并且停止后续所有的
            $("div").stop(true,true)

        })

    });
</script>
<body>
    <button>开始动画</button>
    <button>停止动画</button>
    <div class="one"></div>
    <div class="two"></div>
</body>
</html>

40. 图标特效

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery</title>
</head>
<script src="public/jquery-1.9.1.min.js"></script>
<style>
    *{
        margin: 0px;
        padding: 0px;
    }
    ul{
        list-style: none;
        width: 400px;
        height: 250px;
        border: 1px solid #000;
        margin: 100px auto;
    }
    ul>li{
        width: 100px;
        height: 50px;
        margin-top: 50px;
        text-align: center;
        float: left;
        overflow: hidden;
    }
    ul>li>span{
        display: inline-block;
        width: 24px;
        height: 24px;
        background: url("https://img1.baidu.com/it/u=3694053003,1912698683&fm=26&fmt=auto&gp=0.jpg");
        position: relative;
    }
</style>
<script>
    $(function () {
        //监听li的移入事件
        $("li").mouseenter(function () {
            $(this).children("span").animate({
                //将图片往上移动
                top:-50
            },1000,function () {
                $(this).css("top","50px");
                $(this).animate({
                    top:0
                },1000)
            })
        })
    });
</script>
<body>
<ul>
    <li><span></span><p>美女</p></li>
    <li><span></span><p>美女</p></li>
    <li><span></span><p>美女</p></li>
    <li><span></span><p>美女</p></li>
    <li><span></span><p>美女</p></li>
    <li><span></span><p>美女</p></li>
    <li><span></span><p>美女</p></li>
    <li><span></span><p>美女</p></li>
</ul>

</body>
</html>

blackkerword

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery 基础整理 31-40

31. jQuery显示和隐藏动画<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>jQuery</title></head><script src="public/jquery-1.9.1.min.js"></script><style> *{ mar
复制链接

扫一扫