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实现的listview效果
Apr 28 Javascript
JavaScript-世界上误解最深的语言分析
Aug 12 Javascript
IE8 浏览器Cookie的处理
Jan 31 Javascript
js实现权限树的更新权限时的全选全消功能
Feb 17 Javascript
jQuery 获取和设置select下拉框的值实现代码
Nov 08 Javascript
js判断undefined类型,undefined,null, 的区别详细解析
Dec 16 Javascript
jQuery扩展实现text提示还能输入多少字节的方法
Nov 28 Javascript
Html5+jQuery+CSS制作相册小记录
Dec 30 Javascript
Angularjs处理页面闪烁的解决方法
Mar 09 Javascript
JS实现身份证输入框的输入效果
Aug 21 Javascript
JS简单实现滑动加载数据的方法示例
Oct 18 Javascript
React Native中ScrollView组件轮播图与ListView渲染列表组件用法实例分析
Jan 06 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合并js请求的例子
2013/11/01 PHP
php实现基于pdo的事务处理方法示例
2017/07/21 PHP
PHP编程快速实现数组去重的方法详解
2017/07/22 PHP
TP5框架实现一次选择多张图片并预览的方法示例
2020/04/04 PHP
js 禁止选择功能实现代码(兼容IE/Firefox)
2010/04/23 Javascript
jQuery之ajax技术的详细介绍
2013/06/19 Javascript
jquery 无限级下拉菜单的简单实现代码
2014/02/21 Javascript
JavaScript实现班级随机点名小应用需求的具体分析
2014/05/12 Javascript
jquery实现从数组移除指定的值
2015/06/24 Javascript
JS触发服务器控件的单击事件(详解)
2016/08/06 Javascript
Google 地图API Map()构造器详解
2016/08/06 Javascript
使用Javascript判断浏览器终端设备(PC、IOS(iphone)、Android)
2017/01/04 Javascript
Vue2.0父子组件传递函数的教程详解
2017/10/16 Javascript
vue单页面实现当前页面刷新或跳转时提示保存
2018/11/02 Javascript
详解微信图片防盗链“此图片来自微信公众平台 未经允许不得引用”的解决方案
2019/04/04 Javascript
webpack4.0+vue2.0利用批处理生成前端单页或多页应用的方法
2019/06/28 Javascript
[37:35]DOTA2上海特级锦标赛A组资格赛#1 Secret VS MVP.Phx第二局
2016/02/25 DOTA
pyqt5实现绘制ui,列表窗口,滚动窗口显示图片的方法
2019/06/20 Python
python3中eval函数用法使用简介
2019/08/02 Python
python实现简单井字棋游戏
2020/03/04 Python
python 绘制正态曲线的示例
2020/09/24 Python
CSS去掉A标签(链接)虚线框的方法
2014/04/01 HTML / CSS
HTML5边玩边学(2)基础绘图实现方法
2010/09/21 HTML / CSS
IE10 Error.stack 让脚本调试更加方便快捷
2013/04/22 HTML / CSS
html5桌面通知(Web Notifications)实例解析
2014/07/07 HTML / CSS
使用Html5中的cavas画一面国旗
2019/09/25 HTML / CSS
Aquatalia官网:意大利著名鞋履品牌
2019/09/26 全球购物
中专毕业生自荐信
2013/11/16 职场文书
销售辞职报告范文
2014/01/12 职场文书
大学理论知识学习自我鉴定
2014/04/28 职场文书
考核评语大全
2014/04/29 职场文书
投标承诺书怎么写
2014/05/24 职场文书
常务副县长“四风”个人对照检查材料思想汇报
2014/10/02 职场文书
对党的十八届四中全会的期盼
2014/10/17 职场文书
党的群众路线教育实践活动个人对照检查材料(四风)
2014/11/05 职场文书
2015年控辍保学工作总结
2015/05/18 职场文书