3个jq案例

最新推荐文章于 2022-05-16 22:08:40 发布

DB_鸠

最新推荐文章于 2022-05-16 22:08:40 发布

阅读量189

点赞数

分类专栏： jQ 文章标签： elementui javascript vue.js

本文链接：https://blog.csdn.net/m0_66711291/article/details/123009490

版权

jQ 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1.下拉菜单

<!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>下拉菜单</title>
    <script src="../jquery-3.6.0.min.js"></script>

    <style>

        li ul{
            display: none;
        }

        li{
            list-style: none;
            text-align: center;
        }
        .musicer{
            width: 100px;
            height: 50px;
            font-size: 20px;
            line-height: 50px;
            background-color: aqua;
            float: left;
        }

        .music{
            text-align: center;
            font-size: 10px;
            line-height: 50px;
            background-color: rgb(255, 205, 214);
        }
    </style>
</head>
<body>
    <ul>
        <li id="leaf" class="musicer">leaf
            <ul>
                <li class="music">迷宫莉莉丝</li>
                <li class="music">mopemope</li>
                <li class="music">marenol</li>
            </ul>
        </li>
        <li  id="yan" class="musicer">闫东炜
            <ul>
                <li class="music">萤火虫之怨</li>
                <li class="music">万吨匿名信</li>
                <li class="music">风屿</li>
            </ul>
        </li>
        <li  id="good" class="musicer">good
            <ul>
                <li class="music">goodtak</li>
                <li class="music">goodworld</li>
                <li class="music">goodrage</li>
            </ul>
        </li>
    </ul>

    <script>
        jQuery(function(){
            jQuery('.musicer').mouseenter(function(){
                jQuery(this).children('ul').slideDown(100);
            })
            jQuery('.musicer').mouseleave(function(){
                jQuery(this).children('ul').hide(100);
            })
        })
    </script>
</body>
</html>

2.精选列表

<!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>精选商品</title>
    <script src="../jquery-3.6.0.min.js"></script>

    <style>

        div{
            display: flex;
        }

        li{
            list-style: none;
            width: 100px;
            height: 58px;
            background-color: aquamarine;
            border: 1px solid aqua;
            line-height: 60px;
            text-align: center;
        }

        p{
            display: none;
            width: 300px;
            height: 298px;
            line-height: 300px;
            text-align: center;
            border: 1px solid black;
        }

        .one{
            display: block;
        }
    </style>
</head>
<body>
    <div>
        <ul>
            <li>刻晴</li>
            <li>砂糖</li>
            <li>万叶</li>
            <li>蜜莓</li>
            <li>温迪</li>
        </ul>
        <div>
            <p class="one">刻晴好美</p>
            <p>砂糖好可爱</p>
            <p>万叶好帅</p>
            <p>蜜莓好可爱</p>
            <p>温迪酒量很好</p>
        </div>
    </div>

    <script>
        jQuery('li').mouseenter(function(){
            jQuery(this).css('background-color','purple');
            jQuery(this).css('border','1px solid rgb(211, 103, 238)');
        })

        jQuery('li').mouseleave(function(){
            jQuery(this).css('border','1px solid aqua');
            jQuery(this).css('background-color','aquamarine');
        })

        jQuery('li').click(function(){
            var m = jQuery(this).index();
            jQuery('p').hide();
            jQuery('p').eq(m).show();
        })
    </script>
</body>
</html>

3.手风琴

<!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>手风琴效果</title>

    <script src="../jquery-3.6.0.min.js"></script>
    <style>
       *{
           padding: 0px;
           margin: 0px;
           border: 0px;
           box-sizing: border-box;
       }

       #big{
           width: 100%;
           background-color: aquamarine;
           height: 800px;
           display: flex;
           justify-content: center;
           align-items: center;
       }

       img{
           width: 800px;
           height: 500px;
       }

       .hide{
           width: 100%;
           height: 100%;
           overflow: hidden;
       }

       li{
           float: left;
           width: 100px;
           height: 500px;
           list-style: none;
       }
    </style>
</head>
<body>
    <div id="big"> 
        <ul>
            <li>
                <div class="hide">
                    <img src="../../../../图片/屁股肉曲绘/深海少女.jpg" alt="">
                </div>
            </li>
            <li>
                <div class="hide">
                    <img src="../../../../图片/屁股肉曲绘/雪降.jpg" alt="">
                </div>
            </li>
            <li>
                <div class="hide">
                    <img src="../../../../图片/屁股肉曲绘/终点站.jpg" alt="">
                </div>
            </li>
            <li>
                <div class="hide">
                    <img src="../../../../图片/屁股肉曲绘/时钟悖论.jpg" alt="">
                </div>
            </li>
            <li>
                <div class="hide">
                    <img src="../../../../图片/屁股肉曲绘/忘忧宫.jpg" alt="">
                </div>
            </li>
        </ul>
    </div>

    <script>
        jQuery('li').click(function(){
            jQuery('li').animate({width:100},500);
            jQuery(this).animate({
                width:800}
                ,500);
        })
    </script>
</body>
</html>

DB_鸠

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
3个jq案例

1.下拉菜单<!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"> <tit
复制链接

扫一扫