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 相关文章推荐
js/html光标定位的实现代码
Sep 23 Javascript
js导航栏单击事件背景变换示例代码
Jan 13 Javascript
使用typeof方法判断undefined类型
Sep 09 Javascript
不到30行JS代码实现Excel表格的方法
Nov 15 Javascript
js实现的捐赠管理完整实例
Jan 20 Javascript
jquery仿百度百科底部浮动导航特效
Aug 08 Javascript
Angular2中如何使用ngx-translate进行国际化
May 21 Javascript
浅谈 Vue 项目优化的方法
Dec 16 Javascript
如何基于vue-cli3.0构建功能完善的移动端架子
Apr 24 Javascript
layuiAdmin循环遍历展示商品图片列表的方法
Sep 16 Javascript
ES2020系列之空值合并运算符 '??'
Jul 22 Javascript
Vue看了就会的8个小技巧
Jan 21 Vue.js
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
超神学院:天使彦公认最美的三个视角,网友:我的天使快下凡吧!
2020/03/02 国漫
php 数组字符串搜索array_search技巧
2016/07/05 PHP
php自定义函数实现统计中文字符串长度的方法小结
2017/04/15 PHP
php取出数组单个值的方法
2018/03/12 PHP
jquery 图片预加载 自动等比例缩放插件
2008/12/25 Javascript
JSON 客户端和服务器端的格式转换
2009/08/27 Javascript
javascript prototype原型操作笔记
2009/12/07 Javascript
实现web打印的各种方法介绍及实现代码
2013/01/09 Javascript
小结Node.js中非阻塞IO和事件循环
2014/09/18 Javascript
node.js实现BigPipe详解
2014/12/05 Javascript
zepto.js中tap事件阻止冒泡的实现方法
2015/02/12 Javascript
JS实现横向与竖向两个选项卡Tab联动的方法
2015/09/27 Javascript
利用jquery实现实时更新歌词的方法
2017/01/06 Javascript
jQuery的三种bind/One/Live/On事件绑定使用方法
2017/02/23 Javascript
js 只比较时间大小的实例
2017/10/26 Javascript
JS计算输出100元钱买100只鸡问题的解决方法
2018/01/04 Javascript
JS实现数组简单去重及数组根据对象中的元素去重操作示例
2018/01/05 Javascript
小程序云开发如何实现图片上传及发表文字
2019/05/17 Javascript
JavaScript语句错误throw、try及catch实例解析
2020/08/18 Javascript
JS页面动态绘图工具SVG,Canvas,VML介简介
2020/10/16 Javascript
elementui实现预览图片组件二次封装
2020/12/29 Javascript
[02:03]《现实生活中的DOTA2》—林书豪&DOTA2职业选手出演短片
2015/08/18 DOTA
Python用GET方法上传文件
2015/03/10 Python
python logging 日志轮转文件不删除问题的解决方法
2016/08/02 Python
Python实现代码块儿折叠
2020/04/15 Python
cookies应对python反爬虫知识点详解
2020/11/25 Python
matplotlib制作雷达图报错ValueError的实现
2021/01/05 Python
pycharm 如何取消连按两下shift出现的全局搜索
2021/01/15 Python
canvas像素点操作之视频绿幕抠图
2018/09/11 HTML / CSS
师范生个人推荐信
2013/11/29 职场文书
高一新生军训感言
2014/03/02 职场文书
大一学生个人总结
2015/02/15 职场文书
作息时间调整通知
2015/04/22 职场文书
2015年食品安全工作总结
2015/05/15 职场文书
python实现图片批量压缩
2021/04/24 Python
详解Nginx 被动检查服务器的存活状态
2021/10/16 Servers