jQuery：应用

最新推荐文章于 2024-09-21 09:29:16 发布

脑袋不灵光的小白羊

最新推荐文章于 2024-09-21 09:29:16 发布

阅读量123

点赞数

分类专栏： WEB前端文章标签： jquery javascript css3

本文链接：https://blog.csdn.net/qq_42588990/article/details/122466719

版权

WEB前端专栏收录该内容

36 篇文章 4 订阅

订阅专栏

jQuery应用

菜单功能

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../libs/jquery.min.1.12.4.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        .menu{
            list-style: none;
            width: 500px;
            height: 50px;
            background: skyblue;
            margin: 100px auto;
        }

        .menu > li{
            float: left;
            width: 99px;
            height: 50px;
            line-height: 50px;
            font-size: 20px;
            border-right:1px solid white;
        }
        .dropdown{
            list-style: none;
            display: none;
        }

        .dropdown li{
            width: 100px;
            height: 30px;
            line-height: 30px;
            background: wheat;
        }

    </style>
</head>
<body>

    <ul class="menu">
        <li>
            菜单1
            <ul class="dropdown">
                <li>菜单1</li>
                <li>菜单1</li>
                <li>菜单1</li>
                <li>菜单1</li>
            </ul>
        </li>
        <li>
            菜单2
            <ul class="dropdown">
                <li>菜单2</li>
                <li>菜单2</li>
                <li>菜单2</li>
                <li>菜单2</li>
            </ul>
        </li>
        <li>菜单3</li>
        <li>菜单4</li>
        <li>菜单5</li>
    </ul>

    <script>
        $(".menu li").mouseenter(function(){
            // $(".dropdown").slideDown(1000)
            $(this).children(".dropdown").slideDown(200)
        })

        $(".menu li").mouseleave(function(){
            $(this).children(".dropdown").slideUp(200)
        })

    </script>
    
</body>
</html>

淡入淡出轮播图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../libs/jquery.min.1.12.4.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        .box{
            width: 560px;
            height: 300px;
            border: 5px solid gray;
            margin: 100px auto;
            position: relative;
            overflow: hidden;
        }

        .m_unit{
            width: 10000px;
            height: 300px;
            position: absolute;
            top: 0;
            left: 0;
        }

        .m_unit ul{
            overflow: hidden;
        }

        .m_unit ul li{
            list-style: none;
            position: absolute;
            top: 0;
            left: 0;
            width: 560px;
            height: 300px;
            display: none;
        }

        .m_unit ul li.current{
            display: block;
        }

        .btn span{
            width: 55px;
            height: 55px;
            background: url('./images/dog/btnL.png');
            position: absolute;
            top: 50%;
            margin-top: -27.5px;
            border-radius: 10px;
        }

        .btn span.right{
            background: url("./images/dog/btnR.png");
            right: 0;
        }

        .circle ul li{
            list-style: none;
            float: left;
            width: 20px;
            height: 20px;
            background: orange;
            margin-right: 10px;
            border-radius: 50%;
        }

        .circle ul{
            overflow: hidden;
        }

        .circle{
            position: absolute;
            bottom: 10px;
            right: 10px;
        }

        .circle ul li.current{
            background: red;
        }
    </style>
</head>
<body>

    <div class="box" id="box">
        <div class="m_unit" id="m_unit">
            <ul>
                <li class="current"><a href="http://iwenwiki.com"><img src="./images/dog/0.jpg" alt=""></a></li>
                <li><a href="http://itbaizhan.cn"><img src="./images/dog/1.jpg" alt=""></a></li>
                <li><a href="http://bjsxt.com"><img src="./images/dog/2.jpg" alt=""></a></li>
                <li><a href="http://iwenwiki.com"><img src="./images/dog/3.jpg" alt=""></a></li>
                <li><a href="http://iwenwiki.com"><img src="./images/dog/4.jpg" alt=""></a></li>
            </ul>
        </div>

        <div class="btn">
            <span class="left" id="leftBtn"></span>
            <span class="right" id="rightBtn"></span>
        </div>

        <div class="circle" id="circle">
            <ul>
                <li class="current"></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>

    </div>

    <script>
        // 标识
        var idx = 0;

        // 获取所有的图片资源
        var $lis = $("#m_unit ul li")

        // 定时器：自动轮播
        var timer = setInterval(rightHandle,3000)

        // 鼠标滑入暂停播放
        $("#box").mouseenter(function(){
            clearInterval(timer);
        })

        // 鼠标滑出开始播放
        $("#box").mouseleave(function(){
            timer = setInterval(rightHandle,3000)
        })

        // 点击右按钮
        $("#rightBtn").click(rightHandle)
        function rightHandle(){
            // 当前图片隐藏
            $lis.eq(idx).fadeOut(300);
            // 下一张的索引
            idx+=1
            // 边界处理
            if(idx > $lis.length-1){
                idx = 0;
            }
            // 显示下一张
            $lis.eq(idx).fadeIn(300);

            changeCircle()
        }

        // 点击左按钮
        $("#leftBtn").click(function(){
            // 当前图片隐藏
            $lis.eq(idx).fadeOut(300);
            idx-=1
            if(idx < 0 ){
                idx = $lis.length - 1;
            }
            $lis.eq(idx).fadeIn(300);
            changeCircle()
        })

        // 指示器焦点
        function changeCircle(){
            // siblings():找到所有同级元素
            // $("#circle ul li").eq(idx).css('background','red').siblings().css("background",'orange')
            $("#circle ul li").eq(idx).addClass('current').siblings().removeClass("current")
        }

    </script>
    
</body>
</html>

百叶窗

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../libs/jquery.min.1.12.4.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        .container{
            width: 800px;
            height: 300px;
            margin: 80px auto;
            position: relative;
            border: 1px solid white;
            overflow: hidden;
        }

        .container ul{
            list-style: none;
        }

        .container ul li{
            position: absolute;
        }
        .cover{
            width: 100%;
            height: 300px;
            background: rgba(0, 0, 0, 0.5);
            position: absolute;
        }

        .li1{
            left: 160px;
        }
        .li2{
            left: 320px;
        }
        .li3{
            left: 480px;
        }
        .li4{
            left: 640px;
        }

    </style>
</head>
<body>
    
    <div class="container">
        <ul>
            <li class="li0"><div class="cover"></div><img src="./images/dog/0.jpg" alt=""></li>
            <li class="li1"><div class="cover"></div><img src="./images/dog/1.jpg" alt=""></li>
            <li class="li2"><div class="cover"></div><img src="./images/dog/2.jpg" alt=""></li>
            <li class="li3"><div class="cover"></div><img src="./images/dog/3.jpg" alt=""></li>
            <li class="li4"><div class="cover"></div><img src="./images/dog/4.jpg" alt=""></li>
        </ul>
    </div>

    <script>

        var $lis = $(".container ul li");
        $lis.mouseenter(function(){
            $(this).find(".cover").stop(true).fadeOut()
        }).mouseleave(function(){
            $lis.stop(true);
            $(this).find(".cover").stop(true).fadeIn()
            $lis.eq(1).animate({'left':160},500)
            $lis.eq(2).animate({'left':320},500)
            $lis.eq(3).animate({'left':480},500)
            $lis.eq(4).animate({'left':640},500)
        })

        $(".li0").mouseenter(function(){
            $lis.stop(true);
            $lis.eq(1).animate({'left':560},500)
            $lis.eq(2).animate({'left':620},500)
            $lis.eq(3).animate({'left':680},500)
            $lis.eq(4).animate({'left':740},500)
        })
        $(".li1").mouseenter(function(){
            $lis.stop(true);
            $lis.eq(1).animate({'left':60},500)
            $lis.eq(2).animate({'left':620},500)
            $lis.eq(3).animate({'left':680},500)
            $lis.eq(4).animate({'left':740},500)
        })
        $(".li2").mouseenter(function(){
            $lis.stop(true);
            $lis.eq(1).animate({'left':60},500)
            $lis.eq(2).animate({'left':120},500)
            $lis.eq(3).animate({'left':680},500)
            $lis.eq(4).animate({'left':740},500)
        })
        $(".li3").mouseenter(function(){
            $lis.stop(true);
            $lis.eq(1).animate({'left':60},500)
            $lis.eq(2).animate({'left':120},500)
            $lis.eq(3).animate({'left':180},500)
            $lis.eq(4).animate({'left':740},500)
        })
        $(".li4").mouseenter(function(){
            $lis.stop(true);
            $lis.eq(1).animate({'left':60},500)
            $lis.eq(2).animate({'left':120},500)
            $lis.eq(3).animate({'left':180},500)
            $lis.eq(4).animate({'left':240},500)
        })
        
    </script>

</body>
</html>

折叠面板

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../libs/jquery.min.1.12.4.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        .container{
            width: 600px;
            margin: 80px auto;
            border: 1px solid lightblue;
        }

        .container ul{
            list-style: none;
        }

        .container ul li{
            border-bottom: 1px dotted black;
        }

        .container ul li h3{
            background: skyblue;
            position: relative;
        }

        .container ul li h3 span{
            position: absolute;
            right: 5px;
        }
        .container ul li .content{
            display: none;
        }

    </style>
</head>
<body>

    <div class="container">
        <ul>
            <li>
                <h3>我在这个世界上，向来不觉得是芸芸众生里的一份子<span>></span></h3>
                <div class="content">
                    “沙伊达能迷住他的不过是情欲上的给予，而这个沙仑一定要将沙伊达的肉体，
                    解释做他这一生所有缺乏的东西的代表，他要的是爱，是亲情，是家，
                    是温暖。这么一个拘谨孤单年轻的心，碰到一点即使是假的爱情，
                    也当然要不顾一切的去抓住了。
                </div>
            </li>
            <li>
                <h3>爱的寻求<span>></span></h3>
                <div class="content">
                    她只对我说过一句话：“你拒绝我，伤害了我的骄傲。”每一个沙哈拉威人都是很骄傲的，我不敢常常伤害他们，也不敢不出借东西。
等我们下了天台，再去看羊，这只俘虏不但不叫，反而好像在笑，再低头一看，天啊！我辛苦了一年种出来的九棵盆景，二十五片叶子，全部被它吃得干干净净。我又惊又怒又伤心，举起手来，用尽全身的气力，重重的打了山羊一个大耳光，对荷西尖叫着：“你看，你看”——然后冲进浴室抱住一条大毛巾大滴大滴的流下泪来。这是我第一次为沙漠里的生活泄气以至流泪。
                </div>
            </li>
            <li>
                <h3>芳邻 <span>></span></h3>
                <div class="content">
                   我知道他要带我去国家旅馆吃饭，很快的换好衣服跟他出门，这种事实在很少发生。
“我们要上好的红酒，海鲜汤，我要牛排，给太太来四人份的大明虾，甜点要冰淇淋蛋糕，也是四人份的，谢谢！”荷西对茶房说。
“幸亏今天一天没吃东西，现在正好大吃一顿。”我轻轻的对荷西说。
             </div>
            </li>
        </ul>
    </div>

    <script>
        $("h3").click(function(){
            // is判断一个元素数据具有某个样式
            // :visible 判断一个元素是否显示
            if($(this).siblings().is(":visible")){
                // 可见内容收起来
                $(this).siblings().slideUp();
                // 变更箭头符号
                $(this).find("span").html(">")
            }else{
                // 不可见，展开内容,收起其他内容
                $(this).parent().siblings().find(".content").slideUp();
                // 展开自己
                $(this).siblings().slideDown();
                $(this).parent().siblings().find('span').html(">")
                // 改变符号
                $(this).find('span').html("v")
            }
        })

    </script>
    
</body>
</html>

动画特效

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../libs/jquery.min.1.12.4.js"></script>
    <style>

        *{
            margin: 0;
            padding: 0;
        }

        .container{
            width: 1200px;
            height: 300px;
            position: relative;
            border: 1px solid red;
        }

        .container img{
            position: absolute;
            display: none;
        }

        .img1{
            top: 50px;
        }

        .img2{
            top: 85px;
            left: 80px;
        }

        .img3{
            top: 40px;
            left: 265px;
        }

        .img4{
            top: 50px;
            left:510px
        }

        .img5{
            top: 5px;
            left: 790px;
        }
    </style>
</head>
<body>

    <div class="container">
        <img class="img1" src="./img/360_1.png" alt="">
        <img class="img2" src="./img/360_2.png" alt="">
        <img class="img3" src="./img/360_3.png" alt="">
        <img class="img4" src="./img/360_4.png" alt="">
        <img class="img5" src="./img/360_5.png" alt="">
    </div>
    
    <script>

        $(".container img").each(function(index){
            $(this).delay(index * 500).fadeIn(100).fadeOut(100).fadeIn(100).fadeOut(100).fadeIn(100)
        })

    </script>

</body>
</html>