jQuery经典小案例

目录

下拉菜单案例

突出展示案例 

淘宝精品案例

 京东呼吸灯案例

tab栏切换案例

手风琴案例

 城市选择案例

 微博发布案例

弹幕效果案例

 固定导航栏案例

 小火箭返回顶部案例

音乐导航栏案例


 

 

下拉菜单案例

 

效果图:

下拉菜单案例

源代码: 

鼠标进入事件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>

 京东呼吸灯案例

效果图:点击 切换图片

评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值