jquery之超简单的div显示和隐藏特效demo(分享)


Posted in Javascript onJuly 09, 2013
<!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>无标题文档</title>
<script src="jquery_last.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(  function(){});
function hiden(){
$("#divObj").hide();//hide()函数,实现隐藏,括号里还可以带一个时间参数(毫秒)例如hide(2000)以2000毫秒的速度隐藏,还可以带slow,fast
}
function slideToggle(){
$("#divObj").slideToggle(2000);//窗帘效果的切换,点一下收,点一下开,参数可以无,参数说明同上
}
function show(){
$("#divObj").show();//显示,参数说明同上
}
function toggle(){
$("#divObj").toggle(2000);//显示隐藏切换,参数可以无,参数说明同上
}
function slide(){
$("#divObj").slideDown();//窗帘效果展开
}
</script>
</head>
<body>
<h3>div里内容的显示隐藏特效</h3>
<input type="button" value="隐藏" onclick="hiden()"/>
 <input type="button" value="显示" onclick="show()"/>
 <input type="button" value="窗帘效果显示2" onclick="slide()"/>
 <input type="button" value="窗帘效果的切换" onclick="slideToggle()"/>
  <input type="button" value="隐藏显示效果切换" onclick="toggle()"/>
<div id="divObj" style="display:none">
        1.测试例子<br/>
        2.测试例子<br/>
        3.测试例子<br/>
        4.测试例子<br/>
        5.测试例子<br/>
        6.测试例子<br/>
        7.测试例子<br/>
        8.测试例子<br/>
        9.测试例子<br/>
        0.测试例子<br/>
    </div>
</body>
</html>
Javascript 相关文章推荐
基于mootools 1.3框架下的图片滑动效果代码
Apr 22 Javascript
兼容IE和FF的图片上传前预览js代码
May 28 Javascript
如何使用jQuery Draggable和Droppable实现拖拽功能
Jul 05 Javascript
jquery为页面增加快捷键示例
Jan 31 Javascript
从零学JSON之JSON数据结构
May 19 Javascript
浅谈js的setInterval事件
Dec 05 Javascript
使用JavaScript制作一个简单的计数器的方法
Jul 07 Javascript
详解AngularJS中的http拦截
Feb 09 Javascript
怎么引入(调用)一个JS文件
May 26 Javascript
js简单获取表单中单选按钮值的方法
Aug 23 Javascript
jQuery EasyUI开发技巧总结
Sep 26 jQuery
JS实现音乐钢琴特效
Jan 06 Javascript
解析Jquery中如何把一段html代码动态写入到DIV中(实例说明)
Jul 09 #Javascript
Jquery实现网页跳转或用命令打开指定网页的解决方法
Jul 09 #Javascript
如何使用jquery控制CSS样式,并且取消Css样式(如背景色,有实例)
Jul 09 #Javascript
Jquery显示和隐藏元素或设为只读(含Ligerui的控件禁用,实例说明介绍)
Jul 09 #Javascript
浅析showModalDialog数据缓存问题(用禁止浏览器缓存解决)
Jul 09 #Javascript
JS写的贪吃蛇游戏(个人练习)
Jul 08 #Javascript
jquery click([data],fn)使用方法实例介绍
Jul 08 #Javascript
You might like
php正则取img标记中任意属性(正则替换去掉或改变图片img标记中的任意属性)
2013/08/13 PHP
Javascript-Mozilla和IE中的一个函数直接量的问题分析
2007/08/12 Javascript
firefox浏览器下javascript 拖动层效果与原理分析代码
2007/12/04 Javascript
用Javascript同时提交多个Web表单的方法
2009/12/26 Javascript
另一个javascript小测验(代码集合)
2011/07/27 Javascript
解析javascript 浏览器关闭事件
2013/07/08 Javascript
jquery之超简单的div显示和隐藏特效demo(分享)
2013/07/09 Javascript
js禁止页面复制功能禁用页面右键菜单示例代码
2013/08/29 Javascript
jquery在项目中做复选框时遇到的一些问题笔记
2013/11/17 Javascript
JavaScript中的公有、私有、特权和静态成员用法分析
2014/11/20 Javascript
javascript实现checkBox的全选,反选与赋值
2015/03/12 Javascript
javascript实现2016新年版日历
2016/01/25 Javascript
JavaScript中各种引用类型的常用操作方法小结
2016/05/05 Javascript
javascript函数中的3个高级技巧
2016/09/22 Javascript
node.js实现的装饰者模式示例
2017/09/06 Javascript
解决vuejs项目里css引用背景图片不能显示的问题
2018/09/13 Javascript
jquery树形插件zTree高级使用详解
2019/08/16 jQuery
下载给定网页上图片的方法
2014/02/18 Python
Python中的集合类型知识讲解
2015/08/19 Python
python实现猜单词小游戏
2020/05/22 Python
python reverse反转部分数组的实例
2018/12/13 Python
我们为什么要减少Python中循环的使用
2019/07/10 Python
Python 中的 import 机制之实现远程导入模块
2019/10/29 Python
django API 中接口的互相调用实例
2020/04/01 Python
Python 实现劳拉游戏的实例代码(四连环、重力四子棋)
2021/03/03 Python
有原因的手表:Flex Watches
2019/03/23 全球购物
大学生护理专业自荐信
2013/10/03 职场文书
最新的咖啡店创业计划书
2013/12/30 职场文书
成立公司计划书
2014/05/07 职场文书
卫生标语大全
2014/06/21 职场文书
涉外离婚协议书怎么写
2014/11/20 职场文书
学籍证明模板
2014/11/21 职场文书
工作自我推荐信范文
2015/03/25 职场文书
社区青年志愿者活动总结
2015/05/06 职场文书
聋哑人盗窃罪辩护词
2015/05/21 职场文书
生死抉择观后感
2015/06/09 职场文书