jQuery div层的放大与缩小简单实现代码


Posted in Javascript onMarch 28, 2013
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
<title></title> 
<style type="text/css"> 
.content 
{ 
border: 1px solid #ccc; 
width: 440px; 
overflow: hidden; 
margin: 10px; 
} 
</style> 
<script type="text/javascript" src="jquery-1.4.2.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function() { 
if ($('#content').height() > 400) 
$('#content').height(400); 
$('#bigger').toggle(function() { 
$('#content').height($('#content').height() + 100); 
$('#bigger').html('缩小'); 
}, function() { 
$('#content').height($('#content').height() - 100); 
$('#bigger').html('放大'); 
}) 
}); 
</script> 
</head> 
<body> 
<div id="content" class="content"> 
?热?<br /> 
?热?<br /> 
?热?<br /> 
?热?<br /> 
?热?<br /> 
?热?<br /> 
?热?<br /> 
?热?<br /> 
?热?<br /> 
?热?0<br /> 
?热?1<br /> 
?热?2<br /> 
?热?3<br /> 
?热?4<br /> 
?热?5<br /> 
?热?6<br /> 
?热?7<br /> 
?热?8<br /> 
?热?9<br /> 
?热?0<br /> 
?热?1<br /> 
?热?2<br /> 
?热?3<br /> 
?热?4<br /> 
?热?5<br /> 
</div> 
<br /> 
<span id="bigger">放大</span> 
</body> 
</html>
Javascript 相关文章推荐
在线编辑器的实现原理(兼容IE和FireFox)
Mar 09 Javascript
使用原生js实现页面蒙灰(mask)效果示例代码
Jun 20 Javascript
js+HTML5实现canvas多种颜色渐变效果的方法
Jun 05 Javascript
js实现简单的验证码
Dec 25 Javascript
简单了解Backbone.js的Model模型以及View视图的源码
Feb 14 Javascript
jQuery simplePage+AJAX plus分页插件用法实例
Feb 17 Javascript
页面向下滚动ajax获取数据的实现方法(兼容手机)
May 24 Javascript
JS中使用正则表达式g模式和非g模式的区别
Apr 01 Javascript
在页面中引入js的两种方法(推荐)
Aug 29 Javascript
关于jquery layui弹出层的使用方法
Apr 21 jQuery
vue keep-alive实现多组件嵌套中个别组件存活不销毁的操作
Oct 30 Javascript
如何用JavaScript实现一个数组惰性求值库
May 05 Javascript
jQuery+.net实现浏览更多内容(改编php版本)
Mar 28 #Javascript
js给onclick事件赋值,动态传参数实例解说
Mar 28 #Javascript
自定义jQuery选项卡插件实例
Mar 27 #Javascript
js数组的操作详解
Mar 27 #Javascript
jquery获取tr中控件值并操作tr实现思路
Mar 27 #Javascript
css transform 3D幻灯片特效实现步骤解读
Mar 27 #Javascript
JS删除数组元素的函数介绍
Mar 27 #Javascript
You might like
Laravel中unique和exists验证规则的优化详解
2018/01/28 PHP
High Performance JavaScript(高性能JavaScript)读书笔记分析
2011/05/05 Javascript
jquery中获取元素的几种方式小结
2011/07/05 Javascript
JS保留小数点(四舍五入、四舍六入)实现思路及实例
2013/04/25 Javascript
extjs中form与grid交互数据(record)的方法
2013/08/29 Javascript
JS分页效果示例
2013/10/11 Javascript
extjs表格文本启用选择复制功能具体实现
2013/10/11 Javascript
JS组件Bootstrap Table表格多行拖拽效果实现代码
2015/12/08 Javascript
从重置input file标签中看jQuery的 .val() 和 .attr(“value”) 区别
2016/06/12 Javascript
jQuery实现鼠标经过时高亮,同时其他同级元素变暗的效果
2016/09/18 Javascript
解决html-jquery/js引用外部图片时遇到看不了或出现403的问题
2017/09/22 jQuery
vue计算属性时v-for处理数组时遇到的一个bug问题
2018/01/21 Javascript
vue-cli2 构建速度优化的实现方法
2019/01/08 Javascript
[02:51]2014DOTA2国际邀请赛 IG战队官方纪录片
2014/07/21 DOTA
Python开发常用的一些开源Package分享
2015/02/14 Python
Python实现导出数据生成excel报表的方法示例
2017/07/12 Python
Numpy 将二维图像矩阵转换为一维向量的方法
2018/06/05 Python
python读取图片任意范围区域
2019/01/23 Python
对python中list的拷贝与numpy的array的拷贝详解
2019/01/29 Python
Python可变和不可变、类的私有属性实例分析
2019/05/31 Python
使用python实现ftp的文件读写方法
2019/07/02 Python
twilio python自动拨打电话,播放自定义mp3音频的方法
2019/08/08 Python
详解解决Python memory error的问题(四种解决方案)
2019/08/08 Python
Python 函数list&amp;read&amp;seek详解
2019/08/28 Python
python实现将两个文件夹合并至另一个文件夹(制作数据集)
2020/04/03 Python
Python库skimage绘制二值图像代码实例
2020/04/10 Python
Django多层嵌套ManyToMany字段ORM操作详解
2020/05/19 Python
Keras官方中文文档:性能评估Metrices详解
2020/06/15 Python
python 输入字符串生成所有有效的IP地址(LeetCode 93号题)
2020/10/15 Python
10个很棒的 CSS3 开发工具 推荐
2011/05/16 HTML / CSS
Alba Moda瑞士网上商店:独家意大利时尚女装销售
2016/11/28 全球购物
打印机墨盒:123Inkjets
2017/02/16 全球购物
启动一个线程是用run()还是start()
2016/12/25 面试题
巴西世界杯32强口号
2014/06/05 职场文书
平安建设汇报材料
2014/12/29 职场文书
大学辅导员述职报告
2015/01/10 职场文书