jquery实现点击按钮弹出层

作者:林炜贤来源:www.163css.com发表时间:(2011-07-08)

这种动画看起来是非常简单的,点击一下按钮,一个层就弹出来,让人感觉像二级菜单,不过今天我采用jquery来实现。

这里需要讲到jquery里一个函数,toggle,其实主要就是实现切换的功能,在jquery中我们会看到消失出现切换,而这个的作用就在于点击了。。。

“toggleClass”用来实现样式名的切换,这个非常有用哦,我们可以动态地添加样式名,接着通过样式实现类似动画切换。。。

当然了,如果这是这样,那也太简单了,这个代码里还加上了一个功能,就是当你点击页面的空白处,同样可以实现层消失,当然出现是不行的,if($(e.target).parent("a.signin").length==0) 这话就是说当你没有点击到按钮,$(".signin").removeClass("menu-open");删除menu-open这个样式名,$("#signin_menu").hide();接着层消失。。。

这是最初的状态:

这是点击后的状态:

以下我提供源文件,欢迎有需要的朋友下载使用:

预览地址:http://www.163css.net/net163/cssjs/201107/jqtcc/index.html

下载地址:jquery实现点击按钮弹出层.zip 

返回作者主页:www.163css.com阅读 (12135)
更多 1