jQuery经典小案例

最新推荐文章于 2024-11-10 14:00:00 发布

美貌与智慧并存的妞

最新推荐文章于 2024-11-10 14:00:00 发布

阅读量1.7w

点赞数 53

CC 4.0 BY-SA版权

分类专栏：案例及项目集合文章标签： jQuery 简单案例

本文链接：https://blog.youkuaiyun.com/wawa648305941/article/details/88881864

下拉菜单案例

效果图：

下拉菜单案例

源代码：

鼠标进入事件mouseenter 鼠标离开事件mouseleave

下拉动画slideDown /slideUp

.stop() 停止动画

<script>
      $(function(){
        var $li=$(".wrap>ul>li")
        $li.mouseenter(function () {
          $(this).children("ul").stop().slideDown();
        })
        $li.mouseleave(function () {
          $(this).children("ul").stop().slideUp();
        })
      });
  </script>

突出展示案例

效果图：

突出展示案例图

源代码：

兄弟标签 $( ).siblings( )

<script>
    $(function () {
      
      $(".wrap>ul>li").mouseenter(function () {
        //给li注册鼠标进入事件，让li都变亮
        //让li的所有兄弟透明度降低
        $(this).css("opacity","1").siblings().css("opacity",".4");
      });
      
      $(".wrap").mouseleave(function () {
        //离开父盒子时，所有li亮起来
        //$(this).children().children("li");
        $(this).find('li').css("opacity", 1);
      });
    });
  </script>

淘宝精品案例

效果图：

源代码：

获取索引用 .index()；

筛选选择器 $().eq(i)；

<script>
    $(function () {
      $("#left>li").mouseenter(function () {
        var index=$(this).index();
        $("#center>li").eq(index).show().siblings().hide();
      });
      $("#right>li").mouseenter(function () {
        var index=$(this).index()+9;
        $("#center>li").eq(index).show().siblings().hide();
      });
    });
  </script>