案例突出显示

这次我们要学习的是突出显示案例,这个案例要使用的方法是jQuery。

首先在栅格系统wrap内创建8个li标签在里面放入可选中的图片

<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>

然后把页面的属性设置好

 <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 {

            width: 200px;

            height: 186px;

            display: block;

            border: 0;

        }

      </style>

把jQuery插件带入代码中

<script src="./jquery-1.12.2.js"></script>

写入页面加载事件获取所有的li,添加鼠标移入移出事件

<script>

            $(function(){

                // 获取所有的li,添加鼠标进入事件

                $(".wrap>ul>li").mouseenter(function(){

                    // 设置当前li的透明度,同时修改当前li的所有兄弟元素li的透明度

                    $(this).css("opacity",1).siblings().css("opacity",0.5);

                });

                // 鼠标离开事件

                $(".wrap").mouseleave(function(){

                    // 从当前的div中找到所有的li,设置透明度

                    // find("值") 找到当前父级元素下面的子元素 值:子元素,孙子元素

                    $(this).find("li").css("opacity",1);

                });

            });

      </script>

小结:本次学习的内容属于jQuery的鼠标移入mouseenter移出mouseleave事件,通过移入移出显示了高亮效果非常突出,注意: siblings()是兄弟元素而 nextsiblings()则是下一个兄弟元素,find("值") 找到当前父级元素下面的子元素 值:子元素,孙子元素。

这是我所学到的jQuery案例，所以我要分享给你们，希望可以帮助到你们。

以上就是我的分享，新手上道，请多多指教。如果有更好的方法或不懂得地方欢迎在评论区教导和提问喔！