jQuery简单动画实例2--小米展示栏拉伸

最新推荐文章于 2024-11-10 15:10:09 发布

资深咸鱼~

最新推荐文章于 2024-11-10 15:10:09 发布

阅读量1.4k

点赞数

文章标签： javascript jquery html

本文链接：https://blog.csdn.net/qq_51644702/article/details/124348961

版权

主要应用:hover()、animate()

图片更换的时候需要注意盒子宽高

鼠标移进和移出效果图：

源码：

<!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>js动画案例2--小米</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            position: absolute;
            display: flex;
            width: 1350px;
            height: 400px;
            margin-left: 100px;
            margin-top: 100px;
            border: 1px solid red;


        }

        ul li {
            list-style: none;
            width: 270px;
            overflow: hidden;
        }
    </style>
</head>
<script src="./js/jquery-3.6.0.js"></script>

<body>

    <ul>
        <li class="l1">
            <img src="./素材1/images/1.jpg" alt="#"></li>
        <li class="l2">
            <img src="./素材1/images/2.jpg" alt="#"></li>
        <li class="l3">
            <img src="./素材1/images/3.jpg" alt="#"></li>
        <li class="l4">
            <img src="./素材1/images/4.jpg" alt="#"></li>
        <li class="l5">
            <img src="./素材1/images/5.jpg" alt="#"></li>
    </ul>

    <script>
        $(".l1").hover(
            function () {
                $('.l1').stop().animate({
                    "width": 8000
                }, 30, "linear")
            },
            function () {
                $('.l1').stop().animate({
                    "width": 270
                }, 30, "linear")

            })

        $(".l2").hover(
            function () {
                $('.l2').stop().animate({
                    "width": 8000
                }, 30, "linear")
            },
            function () {
                $('.l2').stop().animate({
                    "width": 270
                }, 30, "linear")

            })

        $(".l3").hover(
            function () {
                $('.l3').stop().animate({
                    "width": 8000
                }, 30, "linear")
            },
            function () {
                $('.l3').stop().animate({
                    "width": 270
                }, 30, "linear")

            })

        $(".l4").hover(
            function () {
                $('.l4').stop().animate({
                    "width": 8000
                }, 30, "linear")
            },
            function () {
                $('.l4').stop().animate({
                    "width": 270
                }, 30, "linear")

            })
        $(".l5").hover(
            function () {
                $('.l5').stop().animate({
                    "width": 8000
                }, 30, "linear")
            },
            function () {
                $('.l5').stop().animate({
                    "width": 270
                }, 30, "linear")

            })
    </script>
</body>

</html>