有乎-Tommy.Li的个人博客

价值、共享、信任

【CSS】单击"立即购买",上滑选择规格动画

| 阅读:131 发表时间:2020-05-14 22:28:55 HTML5+CSS3

Image

使用场景:简易商城,点击立即购买,上滑选择规格等 相关详细信息

1、定义CSS(半透明背景层#mask,上滑功能主体:#mod_area)   

  #mask{position:fixed;width:100%;height:100%;background:rgba(0,0,0,0.6);z-index:9998;top:0;transition:0.5s;display:none;}
  #mod_area{position:fixed;height:695px;width:100%;left:0;bottom:-810px;z-index:9999;transition:0.5s;background:white;border-top:1px solid #efefef;}
  .area_show{bottom:0px !important;}

  注:这里transition:0.5s  是主要部分,代表动画时长

2、定义JS方法(通过JS操作添加CSS的方法实现上滑效果)

<script>
     
    function hide_sel(){ 
        $('#mod_area').removeClass('area_show')
        $("#mask").fadeOut();
    }
     
    function show_sel(){
        $('#mod_area').addClass('area_show')
        $("#mask").fadeIn();
    }
</script>

3、只需要在HTML中调用show_sel()即可,  然后 $("#mask").click(function(){ hide_sel()} ) //用于关闭功能主体

*文章为作者独立观点,不代表【uuuho有乎】的立场
本文由【uuuho有乎】发表并编辑,转载此文章须经作者同意,并请附上出处及本页链接。如有侵权,请联系本站删除。