JQuery总结（三）

news2024/11/15 21:27:45

jQuery 事件

on可以同时绑定多个事件，并且动态添加的元素也会自动添加事件
在这里插入图片描述

自动触发事件：

在这里插入图片描述

案例1：

<style>
    div{
        width: 100px;
        height: 200px;
        background-color: violet;
        transition: all .5s;
    }
    .current{
        width: 200px;
        height: 100px;
        background-color: aqua;
        transform: rotate(180deg);
    }
</style>
<body>
    <div class="current"></div>
</body>
<script src="jQuery.min.js"></script>
<script >
//操作类样式，里面的类不用加上小圆点
// 添加类
// $("div").click(function() {
//     $(this).addClass("current");
// })
// //删除类
// $("div").click(function() {
//     $(this).removeClass("current");
// })
//切换类
$("div").click(function() {
   
    $(this).toggleClass("current")
   
})
</script>

案例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.min.js"></script>
</head>
<style>
* {
            margin: 0;
            padding: 0;
        }
        
        li {
            list-style-type: none;
        }
        
        a {
            text-decoration: none;
            font-size: 14px;
        }
        
        .nav {
            margin: 100px;
        }
        
        .nav>li {
            position: relative;
            float: left;
            width: 80px;
            height: 41px;
            text-align: center;
        }
        
        .nav li a {
            display: block;
            width: 100%;
            height: 100%;
            line-height: 41px;
            color: #333;
        }
        
        .nav>li>a:hover {
            background-color: #eee;
        }
        
        .nav ul {
            display: none;
            position: absolute;
            top: 41px;
            left: 0;
            width: 100%;
            border-left: 1px solid #FECC5B;
            border-right: 1px solid #FECC5B;
        }
        
        .nav ul li {
            border-bottom: 1px solid #FECC5B;
        }
        
        .nav ul li a:hover {
            background-color: #FFF5DA;
        }
</style>
<body>
    <ul class="nav">
        <li>
            <a href="#">微博</a>
            <ul>
                <li>
                    <a href="">私信</a>
                </li>
                <li>
                    <a href="">评论</a>
                </li>
                <li>
                    <a href="">@我</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">微博</a>
            <ul>
                <li>
                    <a href="">私信</a>
                </li>
                <li>
                    <a href="">评论</a>
                </li>
                <li>
                    <a href="">@我</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">微博</a>
            <ul>
                <li>
                    <a href="">私信</a>
                </li>
                <li>
                    <a href="">评论</a>
                </li>
                <li>
                    <a href="">@我</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">微博</a>
            <ul>
                <li>
                    <a href="">私信</a>
                </li>
                <li>
                    <a href="">评论</a>
                </li>
                <li>
                    <a href="">@我</a>
                </li>
            </ul>
        </li>
    </ul>
</body>
<script>
    $(function(){
        $(".nav>li").mouseover(function() {
         $(this).children("ul").show();   
        });
    })
    //鼠标离开
    $(".nav>li").mouseout(function() {
        $(this).children("ul").hide();   
    })
</script>
</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>Document</title>
</head>
<script src="jQuery.min.js"></script>
<style>
    body{
        background-color: black;
    }
div{margin: 200px auto;
    width: 680px;
    height: 450px;
    padding: 10px;
    border:1px solid #fff;
    
    /* box-sizing: border-box; */
}
ul li{
    list-style: none;
}
li img{
    float: left;
width: 200px;
height: 200px;
}
.pa{
    margin-right: 10px;
}
ul li img{
    margin-bottom: 10px;
}
</style>
<body>
    <div>
        <ul>
            <li><img src="img/2014.01.01-1535.jpg" alt=""  class="pa"></li>
            <li><img src="img/2014.01.01-1545.jpg" alt="" class="pa"></li>
            <li><img src="img/2014.01.01-445.png" alt=""></li>
            <li><img src="img/2014.01.01-673.png" alt="" class="pa"></li>
            <li><img src="img/2014.01.02-142.png" alt="" class="pa"></li>
            <li><img src="img/2014.01.02-1446.jpg" alt=""></li>
        </ul>
    </div>
</body>
<script>
    $(function(){
        $("div li").hover(function() { 
            $(this).siblings().stop().fadeTo(400,0.5);
        },function() {
            $(this).siblings().stop().fadeTo(400,1);
        })
    })
</script>
</html>

案例4：动画效果

<!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>
</head>
<style>
    button{
        font-size:15px;
    }
    div{
        /* 注意,动画一定要加上定位 */
        position: absolute;
        width: 100px;
        height: 100px;
        background-color: pink;
    }
</style>
<body>
    <button>动起来</button>
    <div></div>
</body>
<script src="jQuery.min.js"></script>
<script>
$(function() {
$("button").click(function() {
    $("div").animate({
        left:200,
        bottom:300,
        opacity:0.4,
        width:300,
        height:300
        //定义一个间隔时间
    },300);
})
})
</script>
</html>

案例5：王者荣耀手风琴

在这里插入图片描述

<!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>
</head>
<style>
 /* 初始化 */
 *{
        margin: 0 auto;
        padding: 0;
    }
    img{
        width: 100%;
        height: 100%;
    }
    ul{
        list-style: none;
    }
    /* 大盒子 */
    .bigbox{
        width: 800px;
        /* height: 100px; */
        background-color:#1d4871;
        padding: 10px;
        margin-top: 10vh;
        overflow: hidden;
        border-right: 39px solid #0d426c;
    }
    /* 设置每一个li */
    .bigbox ul li{
        position: relative;
        float: left;
        width: 69px;
        height: 69px;
        margin: 10px;
    }
    /* 图片的设置 */
    .big{
        display: none;
        border-radius: 5px;
        width: 224px;
    }
    .small{
        border:3px solid #FFf;
        position: absolute;
        top: 0;
        left: 0;
        width: 69px;
        height: 69px;
        border-radius: 5px;
    }
    /* current类名设置 */
    .bigbox ul .current .big{
        display: block;
    }
    .bigbox ul .current .small{
        display: none;
    }
    .bigbox ul .current{
        width: 224px;
    }
</style>
<body>
    <div class="bigbox">
        <ul>
            <li class="current">
                <a href="">
                <img src="wz_img/112-freehover - 副本.jpg" alt="" class="small">
                <img src="wz_img/112-freehover.png" alt="" class="big">
            </a>
            </li>

            <li>
                <a href=""></a><img src="wz_img/125-freehover - 副本.png" alt="" class="small">
                <img src="wz_img/125-freehover.png" alt="" class="big"></a>
            </li>
            <li>
                <a href=""></a><img src="wz_img/131-freehover - 副本.png" alt="" class="small">
                <img src="wz_img/131-freehover.png" alt="" class="big"></a></li>
            <li><a href=""></a><img src="wz_img/144-freehover - 副本.jpg" alt="" class="small">
                <img src="wz_img/144-freehover.png" alt="" class="big"></a></li>
            <li><a href=""></a><img src="wz_img/168-freehover - 副本.jpg" alt="" class="small">
                <img src="wz_img/168-freehover.png" alt="" class="big"></a></li>
            <li><a href=""></a><img src="wz_img/504-freehover - 副本.png" alt="" class="small">
                <img src="wz_img/504-freehover.png" alt="" class="big"></a></li>
            <li><a href=""></a><img src="wz_img/529-freehover - 副本.png" alt="" class="small">
                <img src="wz_img/529-freehover.png" alt="" class="big"></a></li>
        </ul>
    </div>
</body>
<script src="jQuery.min.js"></script>
<script>
$(function() {
    $(".bigbox li").mouseenter(function() {
        //宽度变化，大图淡入，小图淡出
        $(this).stop().animate({
            width:224,
         //找一下孙子img 儿子是a

        },1000).find(".small").stop().fadeOut().siblings(".big").stop().fadeIn();
    //    让未被选择的其余兄弟保持小图模式
        $(this).siblings("li").stop().animate({
            width:69,

        },400).find(".small").stop().fadeIn().siblings(".big").stop().fadeOut();
    })
})
</script>
</html>