最近很想做一个像美团上点击分类或地址,后面的背景变黑,下拉菜单提亮的效果。如下图
其实做个蒙版很容易拉,这是css的写法。 .mban{position:fixed;z-index:16;top:0;left:0;width:100%;height:100%;background:#000;filter:alpha(opacity=50);-moz-opacity:0.5;opacity:0.5;}
有一点需要注意,就是position:fixed,如果不加入这条,你会发现你的蒙版只是一个屏幕的大小,当你往下活动屏幕时就没有蒙版了。所以就把蒙版固定了,这样滑动屏幕的时候,蒙版还一直显示在页面上。
主要就再看点击的时候显示下拉菜单和蒙版。我是用jquery控制的,主要就是先隐藏下拉菜单即设定其display为none,当点击分类的时候,出现下拉菜单和蒙版,而当手点击蒙版或者滑动的时候,下拉菜单和蒙版同时消失。
因为是手机webapp我使用了touchstart和touchmove,自我感觉touchstart在手机上触发比click好,其实click是一样的。一开始使用mousemove,发现手指在屏幕上移动是不会触发mousemove,这个应该只适用于pc网页
$(document).ready(function(){
$("#category").bind('touchstart', function(event){
if($("#show").css("display") == "none"){
$("#mban").addClass("mban");//添加蒙版样式
$("#show").css("display","inline");//显示下拉列表,我用ul写的
$("#show").addClass("show");//下拉菜单的位置样式等
}else{//当已经有下拉菜单时,点击则菜单与蒙版消失,分别移除样式并隐藏菜单
$("#mban").removeClass("mban");
$("#show").removeClass("show");
$("#show").css("display","none");
}
});
$("#mban").bind('touchstart', function(event){//点击蒙版时,下拉菜单与蒙版消失,分别移除样式并隐藏菜单
$("#mban").removeClass("mban");
$("#show").removeClass("show");
$("#show").css("display","none");
});
$("#mban").bind('touchmove', function(event){//在蒙版处滑动屏幕时,下拉菜单与蒙版消失,分别移除样式并隐藏菜单
$("#mban").removeClass("mban");
$("#show").removeClass("show");
$("#show").css("display","none");
});
});