jquery简单实现网页层的展开与收缩效果
更新时间：2015年08月07日 13:08:42 作者：皮蛋
这篇文章主要介绍了jquery简单实现网页层的展开与收缩效果的方法,涉及jquery中toggle结合animate方法操作页面元素属性的相关技巧,非常简单实用,需要的朋友可以参考下
本文实例讲述了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程序设计有所帮助。
相关文章
jQuery扩展方法实现Form表单与Json互相转换的实例代码
本文通过实例代码给大家介绍了jQuery扩展方法实现Form表单与Json互相转换的相关知识，并给大家介绍了jquery两种扩展方法,需要的朋友可以参考下2018-09-09
使用BootStrap和Metroui设计的metro风格微网站或手机app界面
今天使用bootstrap和metroui设计了一个metro风格的移动app或者微信微网站的界面，非常不错具有参考借鉴价值，感兴趣的朋友可以参考下2016-10-10
在网页中我们经常会用到无缝轮播左右循环效果，今天脚本之家小编给大家带来了基于jQuery实现无缝轮播与左右点击效果 ，感兴趣的朋友参考下吧2018-05-05
这篇文章主要介绍了Jquery 整理元素选取、常用方法一览表的相关资料,这里整理了相关资料，便于大家查看，需要的朋友可以参考下2016-11-11
这篇文章主要介绍了jQuery中可见性过滤选择器的使用,文中分为不可见性选择器和可见性选择器来分别举例讲解,需要的朋友可以参考下2016-04-04
这篇文章主要介绍了jquery实现的分页显示功能,涉及jQuery的ajax交互及页面元素属性动态操作相关实现技巧,需要的朋友可以参考下2019-08-08
这篇文章主要介绍了jQuery-each()方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-03-03
这篇文章主要介绍了基于bootstrap3和jquery的分页插件的相关资料,需要的朋友可以参考下2015-07-07
简单过滤选择器：根据某类过滤规则进行元素的匹配，书写时都以冒号（：）开头；简单过滤选择器是过滤选择器中使用最广泛的一种，感兴趣的朋友可以参考下2013-04-04
下面小编就为大家分享一篇jquery 输入框查找关键字并提亮颜色的实例代码，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-01-01
最新评论