jquery简单实现网页层的展开与收缩效果


Posted in Javascript onAugust 07, 2015

本文实例讲述了jquery简单实现网页层的展开与收缩效果。分享给大家供大家参考。具体如下:

这里演示了jquery网页层展开、层收缩代码,带缓冲动画效果,点击指定的文字或按钮,可展开指定层,再次单击会收起层,类似效果网上已见到许多,请根据自己的需要修改代码,别忘了引入最新的jQuery插件哦。

运行效果截图如下:

jquery简单实现网页层的展开与收缩效果

具体代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Div层的收缩与展开</title>
<style>
#content {
font-size: 14px;
width: 730px;
height: 25px;
background:#FFF; line-height:25px;
border: 1px #ccc double;
overflow: hidden;
border:1px solid #99a5ab;
}
#key {
color: red;
float: right;
width:50px;
height:25px;
line-height:25px
margin:0 0 0 0;
}
</style>
<script type='text/javascript' src='jquery-1.6.2.min.js'></script>
<script type="text/javascript">
 $(function(){
  $("#key").toggle(function(){
   $(this).html("关闭").parent().animate({height:"280px"},1000);
   },function(){
   $(this).html("展开").parent().animate({height:"25px"},1000);
   })
 })
</script>
</head>
<body>
<div id="content"> <span id="key"">展开</span><span class="fonttitle">标题</span>
  <table width="700" border="1px" cellpadding="0" cellspacing="0">
   <tr>
   <td>1</td>
   <td>2</td>
   <td>2</td>
   <td>2</td>
   <td>2</td>
   <td>2</td>
   <td>2</td>
   <td>2</td>
   </tr>
   </table>
   </div>
</body>
</html>

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

Javascript 相关文章推荐
jQuery UI AutoComplete 自动完成使用小记
Aug 21 Javascript
jQuery.ajax 用户登录验证代码
Oct 29 Javascript
javascript 保存文件到本地实现方法
Nov 29 Javascript
JS导出PDF插件的方法(支持中文、图片使用路径)
Jul 12 Javascript
JavaScript实现使用Canvas绘制图形的基本教程
Oct 27 Javascript
浅谈js for循环输出i为同一值的问题
Mar 01 Javascript
vue 挂载路由到头部导航的方法
Nov 13 Javascript
微信小程序实现流程进度的图样式功能
Jan 16 Javascript
解决vue无法设置滚动位置的问题
Oct 07 Javascript
通过实例讲解JS如何防抖动
Jun 15 Javascript
vue+animation实现翻页动画
Jun 29 Javascript
原生JS实现京东查看商品点击放大
Dec 21 Javascript
javascript+HTML5的Canvas实现Lab单车动画效果
Aug 07 #Javascript
jQuery实现仿腾讯视频列表分页效果的方法
Aug 07 #Javascript
jQuery使用animate创建动画用法实例
Aug 07 #Javascript
浅谈JavaScript 的执行顺序
Aug 07 #Javascript
javascript封装 Cookie 应用接口
Aug 07 #Javascript
jQuery实现鼠标经过弹出提示信息的地图热点效果
Aug 07 #Javascript
jQuery与getJson结合的用法实例
Aug 07 #Javascript
You might like
基于php冒泡排序算法的深入理解
2013/06/09 PHP
PHP中的output_buffering详细介绍
2014/09/27 PHP
WordPress开发中用于获取近期文章的PHP函数使用解析
2016/01/05 PHP
javascript客户端解决方案 缓存提供程序
2010/07/14 Javascript
JavaScript格式化数字的函数代码
2010/11/30 Javascript
addEventListener和attachEvent二者绑定的执行函数中的this不相同
2012/12/09 Javascript
jQuery中的Deferred和promise 的区别
2016/04/03 Javascript
jQuery ajax调用后台aspx后台文件的两种常见方法(不是ashx)
2016/06/28 Javascript
JavaScript 动态三角函数实例详解
2017/01/08 Javascript
AngularJS页面传参的5种方式
2017/04/01 Javascript
自适应布局meta标签中viewport、content、width、initial-scale、minimum-scale、maximum-scale总结
2017/08/18 Javascript
react-native封装插件swiper的使用方法
2018/03/20 Javascript
JavaScript引用类型RegExp基本用法详解
2018/08/09 Javascript
JavaScript函数的特性与应用实践深入详解
2018/12/30 Javascript
vue移动端的左右滑动事件详解
2020/06/17 Javascript
element中Steps步骤条和Tabs标签页关联的解决
2020/12/08 Javascript
[02:05]2014DOTA2西雅图邀请赛 专访啸天mik夫妻档
2014/07/08 DOTA
python实现bitmap数据结构详解
2014/02/17 Python
Python 获取ftp服务器文件时间的方法
2019/07/02 Python
python pptx复制指定页的ppt教程
2020/02/14 Python
浅谈Python中re.match()和re.search()的使用及区别
2020/04/14 Python
解决python Jupyter不能导入外部包问题
2020/04/15 Python
Python使用Selenium模拟浏览器自动操作功能
2020/09/08 Python
python request 模块详细介绍
2020/11/10 Python
澳大利亚香水在线:Price Rite Mart
2017/12/28 全球购物
介绍一下Ruby的多线程处理
2013/02/01 面试题
学生会主席就职演讲稿
2014/01/14 职场文书
安全生产计划书
2014/05/04 职场文书
奥运会口号
2014/06/13 职场文书
党员批评与自我批评思想汇报
2014/10/08 职场文书
教师辞职信范文
2015/02/28 职场文书
导游词之贵州织金洞
2019/10/12 职场文书
只用50行Python代码爬取网络美女高清图片
2021/06/02 Python
在Spring-Boot中如何使用@Value注解注入集合类
2021/08/02 Java/Android
总结高并发下Nginx性能如何优化
2021/11/01 Servers
JavaScript高级程序设计之基本引用类型
2021/11/17 Javascript