jQuery实现的卷帘门滑入滑出效果【案例】

本文实例讲述了框架实现的卷帘门滑入滑出效果。分享给大家供大家参考，具体如下：

效果：

如果用JQ来做，其实非常简单，核心代码：

脚本src=' http :http://libs。百度。com/jquery/2。0 .0/jquery。量滴js '/script script//jq入口函数简写方法/* $(function () { })*///jq入口函数普通方式$(文档)。ready(function () { $('#flip ')).on('click '，function () { $('#content ')).slideToggle('慢速');//慢是代表200毫秒的意思正常是400,快是600,不写默认普通})})/脚本完整的代码：

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' titlewww.jb51.net jQuery滑入滑出/title style #flip，# content { padding: 5px文本对齐：中心；背景-color : # e5eecc；border: 1px固体# c3c3c3} #内容{ padding: 100pxdisplay:无；} #翻转cursor:指针；}/style/head dydiv id=' flip '点我，显示或隐藏面版/divdiv id='content'hello world！/div脚本src=' http :http://libs。百度。com/jquery/2。0 .0/jquery。量滴js '/script script//jq入口函数简写方法/* $(function () { })*///jq入口函数普通方式$(文档)。ready(function () { $('#flip ')).on('click '，function () { $('#content ')).slideToggle('慢速');//慢是代表200毫秒的意思正常是400,快是600,不写默认普通})})/脚本/正文/html感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://工具。JB 51。net/code/HTMljsrun测试上述代码运行效果。

更多关于框架相关内容感兴趣的读者可查看本站专题： 《jQuery页面元素操作技巧汇总》 、 《jQuery常见事件用法与技巧总结》 、 《jQuery常用插件及用法总结》 、 《jQuery扩展技巧总结》 及《jquery选择器用法总结》

希望本文所述对大家框架程序设计有所帮助。