jquery---突出显示

最新推荐文章于 2022-10-05 16:27:47 发布

ohh58

最新推荐文章于 2022-10-05 16:27:47 发布

阅读量143

点赞数

文章标签： JavaScript 图片轮播 CSS样式事件处理动画效果

本文链接：https://blog.csdn.net/qq_44692018/article/details/110091553

版权

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;
        }

        body {
            background: #000;
        }

        .wrap {
            margin: 100px auto 0;
            width: 630px;
            height: 394px;
            padding: 10px 0 0 10px;
            background: #000;
            overflow: hidden;
            border: 1px solid #fff;
        }

        .wrap li {
            float: left;
            margin: 0 10px 10px 0;
        }

        .wrap img {
            display: block;
            border: 0;
        }
    </style>
    <script src="js/jquery.min.js"></script>
    <script>

        $(function (){
            $(".wrap ul li").mouseover(function (){
                // 停止动画 ，
                $(this).stop().fadeTo(500,1).siblings("li").stop().fadeTo(500,.5)
            })
        })


    </script>
</head>

<body>
<div class="wrap">
    <ul>
        <li>
            <a href="#"><img src="images/01.jpg" alt=""/></a>
        </li>
        <li>
            <a href="#"><img src="images/02.jpg" alt=""/></a>
        </li>
        <li>
            <a href="#"><img src="images/03.jpg" alt=""/></a>
        </li>
        <li>
            <a href="#"><img src="images/04.jpg" alt=""/></a>
        </li>
        <li>
            <a href="#"><img src="images/05.jpg" alt=""/></a>
        </li>
        <li>
            <a href="#"><img src="images/06.jpg" alt=""/></a>
        </li>
    </ul>
</div>
</body>

</html>