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 相关文章推荐
js之ActiveX控件使用说明 new ActiveXObject()
Mar 03 Javascript
jQuery中remove()方法用法实例
Dec 25 Javascript
javascript实现当前页导航激活的方法
Feb 27 Javascript
jfinal与bootstrap的登录跳转实战演习
Sep 22 Javascript
javascript插件开发的一些感想和心得
Feb 28 Javascript
Bootstrap Search Suggest使用例子
Dec 21 Javascript
Node.js对MongoDB数据库实现模糊查询的方法
May 03 Javascript
解决Vue axios post请求,后台获取不到数据的问题方法
Aug 11 Javascript
微信小程序实现九宫格抽奖
Apr 15 Javascript
layui table动态表头 改变表格头部 重新加载表格的方法
Sep 21 Javascript
JS写滑稽笑脸运动效果
May 28 Javascript
关于vue的列表图片选中打钩操作
Sep 09 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
php数组冒泡排序算法实例
2016/05/06 PHP
php lcg_value与mt_rand生成0~1随机小数的效果对比分析
2017/04/05 PHP
Laravel模型间关系设置分表的方法示例
2018/04/21 PHP
Javascript 文件夹选择框的两种解决方案
2009/07/01 Javascript
jquery lazyload延迟加载技术的实现原理分析
2011/01/24 Javascript
40个新鲜出炉的jQuery 插件和免费教程[上]
2012/07/24 Javascript
当前页禁止复制粘贴截屏代码小集
2013/07/24 Javascript
浮动的div自适应居中显示的js代码
2013/12/23 Javascript
JS+CSS实现模仿浏览器网页字符查找功能的方法
2015/02/26 Javascript
javascript比较两个日期相差天数的方法
2015/07/23 Javascript
基于Node.js的强大爬虫 能直接发布抓取的文章哦
2016/01/10 Javascript
jQuery选择器基础入门教程
2016/05/10 Javascript
浅谈JavaScript中小数和大整数的精度丢失
2016/05/31 Javascript
原生js获取元素样式的简单方法
2016/08/06 Javascript
JS实现搜索框文字可删除功能
2016/12/28 Javascript
DOM事件探秘篇
2017/02/15 Javascript
JS中使用textPath实现线条上的文字
2017/12/25 Javascript
实时监控input框,实现输入框与下拉框联动的实例
2018/01/23 Javascript
使用Angular Cli如何创建Angular私有库详解
2019/01/30 Javascript
解决Vue + Echarts 使用markLine标线(precision精度问题)
2020/07/20 Javascript
WebPack工具运行原理及入门教程
2020/12/02 Javascript
js正则表达式简单校验方法
2021/01/03 Javascript
python实现的防DDoS脚本
2011/02/08 Python
详解Python读取配置文件模块ConfigParser
2017/05/11 Python
使用TensorFlow实现二分类的方法示例
2019/02/05 Python
django模型动态修改参数,增加 filter 字段的方式
2020/03/16 Python
python speech模块的使用方法
2020/09/09 Python
Mixbook加拿大:照片书,照片卡,剪贴簿,年历和日历
2017/02/21 全球购物
实习会计求职自荐信范文
2014/03/10 职场文书
企业元宵节主持词
2014/03/25 职场文书
十周年庆典策划方案
2014/06/03 职场文书
怎样写家长意见
2015/06/04 职场文书
2016年社区服务活动总结
2016/04/06 职场文书
用javascript制作qq注册动态页面
2021/04/14 Javascript
Spring Bean的实例化之属性注入源码剖析过程
2021/06/13 Java/Android
Django + Taro 前后端分离项目实现企业微信登录功能
2022/04/07 Python