遮罩层 – 类似 bing 搜索的效果

要实现一个类似于 bing 搜索的效果,点击搜索框的时候加一层遮罩层,代码如下

(".search").on("click", function(e){(".zhezhao").show();
    (document).one("click", function(){(".zhezhao").hide();
    });
    e.stopPropagation();
});
$(".search").on("click", function(e){
    e.stopPropagation();
});

 
.zhezhao默认为 display:none;
e.stopPropagation();的作用是终止事件冒泡。

上面这种方式是通过控制 display 属性的方式来控制显示与隐藏。
如果将.show() 换成.fadeIn().hide() 换成.fadeOut(),就会有一个动态效果,这是通过控制 opacity 属性来控制显示与隐藏。

发表评论

电子邮件地址不会被公开。 必填项已用*标注