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 相关文章推荐
js checkbox(复选框) 使用集锦
Apr 28 Javascript
jQuery随机切换图片的小例子
Apr 18 Javascript
JS性能优化笔记搜索整理
Aug 21 Javascript
使用jquery animate创建平滑滚动效果(可以是到顶部、到底部或指定地方)
May 27 Javascript
jQuery扁平化风格下拉框美化插件FancySelect使用指南
Feb 10 Javascript
jQuery的层级查找方式分析
Jun 16 Javascript
手机端 HTML5使用photoswipe.js仿微信朋友圈图片放大效果
Aug 25 Javascript
Bootstrap基本样式学习笔记之按钮(4)
Dec 07 Javascript
jQuery 实现双击编辑表格功能
Jun 19 jQuery
Node.js 基础教程之全局对象
Aug 06 Javascript
vue 移动端适配方案详解
Nov 15 Javascript
vue中选项卡点击切换且能滑动切换功能的实现代码
Nov 25 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代码的50个实用技巧必备(下)
2016/01/22 PHP
Yii框架引用插件和ckeditor中body与P标签去除的方法
2017/01/19 PHP
Yii框架连表查询操作示例
2019/09/06 PHP
解决在laravel中auth建立时候遇到的问题
2019/10/15 PHP
jquery连缀语法如何实现
2012/11/29 Javascript
YUI Compressor压缩JavaScript原理及微优化
2013/01/07 Javascript
js判断选择时间不能小于当前时间的示例代码
2013/09/24 Javascript
javascript学习笔记整理(概述、变量、数据类型简介)
2015/10/25 Javascript
JS中判断字符串中出现次数最多的字符及出现的次数的简单实例
2016/06/03 Javascript
通过javascript进行UTF-8编码的实现方法
2016/06/27 Javascript
简易的JS计算器实现代码
2016/10/18 Javascript
功能强大的jquery.validate表单验证插件
2016/11/07 Javascript
bootstrap输入框组件使用方法详解
2017/01/19 Javascript
JS html时钟制作代码分享
2017/03/03 Javascript
vue-cli项目中怎么使用mock数据
2017/09/27 Javascript
nodejs中Express与Koa2对比分析
2018/02/06 NodeJs
jquery ajax加载数据前台渲染方式 不用for遍历的方法
2018/08/09 jQuery
js的对象与函数详解
2019/01/21 Javascript
JavaScript闭包与作用域链实例分析
2019/01/21 Javascript
vue spa应用中的路由缓存问题与解决方案
2019/05/31 Javascript
JavaScript的Proxy可以做哪些有意思的事儿
2019/06/15 Javascript
JavaScript canvas绘制圆弧与圆形
2020/02/18 Javascript
JavaScript使用setTimeout实现倒计时效果
2021/02/19 Javascript
Python中针对函数处理的特殊方法
2014/03/06 Python
Python Requests 基础入门
2016/04/07 Python
Python编程django实现同一个ip十分钟内只能注册一次
2017/11/03 Python
python 计算平均平方误差(MSE)的实例
2019/06/29 Python
Python3.7基于hashlib和Crypto实现加签验签功能(实例代码)
2019/12/04 Python
如何在django中添加日志功能
2020/02/06 Python
Python实现读取并写入Excel文件过程解析
2020/05/27 Python
Python中的流程控制详解
2021/02/18 Python
Origins悦木之源英国官网:雅诗兰黛集团高端植物护肤品牌
2017/11/06 全球购物
个人安全承诺书
2014/05/22 职场文书
西柏坡导游词
2015/02/05 职场文书
儿子满月酒致辞
2015/07/29 职场文书
react国际化react-intl的使用
2021/05/06 Javascript