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 相关文章推荐
利用JavaScript实现新闻滚动效果(实例代码)
Nov 27 Javascript
jQuery之Deferred对象详解
Sep 04 Javascript
如何用javascript计算文本框还能输入多少个字符
Jul 29 Javascript
纯原生js实现table表格的增删
Jan 05 Javascript
微信小程序上滑加载下拉刷新(onscrollLower)分批加载数据(二)
May 11 Javascript
Javascript 严格模式use strict详解
Sep 16 Javascript
Mongoose中document与object的区别示例详解
Sep 18 Javascript
Vue项目中使用Vux的安装过程
May 01 Javascript
JS实现的贪吃蛇游戏完整实例
Jan 18 Javascript
小程序自动化测试的示例代码
Aug 11 Javascript
谈谈JavaScript中的垃圾回收机制
Sep 17 Javascript
jquery插件实现轮播图效果
Oct 19 jQuery
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获取ttf格式文件字体名的方法示例
2019/03/06 PHP
jquery与google map api结合使用 控件,监听器
2010/03/04 Javascript
JavaScript中:表达式和语句的区别[译]
2012/09/17 Javascript
jquery实现tr元素的上下移动示例代码
2013/12/20 Javascript
JS获取各种浏览器窗口大小的方法
2014/01/14 Javascript
jquery使用jxl插件导出excel示例
2014/04/14 Javascript
jQuery如何获取同一个类标签的所有值(默认无法获取)
2014/09/25 Javascript
悬浮广告方法日常收集整理
2016/03/18 Javascript
jQuery ajax请求返回list数据动态生成input标签,并把list数据赋值到input标签
2016/03/29 Javascript
微信小程序 简单教程实例详解
2017/01/13 Javascript
React学习笔记之事件处理(二)
2017/07/02 Javascript
Vue.js自定义事件的表单输入组件方法
2018/03/08 Javascript
vue.js多页面开发环境搭建过程
2019/04/24 Javascript
angularjs1.X 重构controller 的方法小结
2019/08/15 Javascript
vue组件添加事件@click.native操作
2020/10/30 Javascript
[44:26]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#4EG VS Fnatic第二局
2016/03/03 DOTA
python开发之字符串string操作方法实例详解
2015/11/12 Python
python各种语言间时间的转化实现代码
2016/03/23 Python
浅谈Python 集合(set)类型的操作——并交差
2016/06/30 Python
python并发编程之多进程、多线程、异步和协程详解
2016/10/28 Python
独特的python循环语句
2016/11/20 Python
python利用有道翻译实现&quot;语言翻译器&quot;的功能实例
2017/11/14 Python
Python Selenium Cookie 绕过验证码实现登录示例代码
2018/04/10 Python
python 基于DDT实现数据驱动测试
2021/02/18 Python
美国CVS药店官网:CVS Pharmacy
2018/07/26 全球购物
G-Form护具官方网站:美国运动保护装备
2019/09/04 全球购物
怎样从/向数据文件读/写结构
2014/11/23 面试题
毕业生怎样写好自荐信
2013/11/11 职场文书
研究生求职推荐信范文
2013/11/30 职场文书
母亲节感恩寄语
2014/02/21 职场文书
库房管理员岗位职责
2014/03/09 职场文书
先进党员事迹材料
2014/12/24 职场文书
2015年酒店客房部工作总结
2015/04/25 职场文书
入党申请书怎么写?
2019/06/11 职场文书
MySQL InnoDB ReplicaSet(副本集)简单介绍
2021/04/24 MySQL
浅谈Node的内存泄露问题
2022/05/06 NodeJs