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 相关文章推荐
JQuery 遮罩层实现(mask)实现代码
Jan 09 Javascript
基于jQuery的试卷自动排版系统实现代码
Jan 06 Javascript
基于jquery实现的上传图片及图片大小验证、图片预览效果代码
Apr 12 Javascript
jquery 实现表单验证功能代码(简洁)
Jul 03 Javascript
js jquery分别实现动态的文件上传操作按钮的添加和删除
Jan 13 Javascript
jQuery+AJAX实现网页无刷新上传
Feb 22 Javascript
对象题目的一个坑 理解Javascript对象
Dec 22 Javascript
confirm确认对话框的实现方法总结
Jun 17 Javascript
详解angularjs获取元素以及angular.element()用法
Jul 25 Javascript
js获取html页面代码中图片地址的实现代码
Mar 05 Javascript
详解vue项目打包步骤
Mar 29 Javascript
javaScript实现一个队列的方法
Jul 14 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
ThinkPHP实现简单登陆功能
2017/04/28 PHP
Javascript中eval函数的使用方法与示例
2007/04/09 Javascript
运用jquery实现table单双行不同显示并能单行选中
2009/07/25 Javascript
javascript实现可改变滚动方向的无缝滚动实例
2013/06/17 Javascript
input:checkbox多选框实现单选效果跟radio一样
2014/06/16 Javascript
Jquery使用val方法读写value值
2015/05/18 Javascript
JavaScrip常见的一些算法总结
2015/12/28 Javascript
js实现九宫格拼图小游戏
2017/02/13 Javascript
bootstrap的常用组件和栅格式布局详解
2017/05/02 Javascript
js实现二级菜单点击显示当前内容效果
2018/04/28 Javascript
angularJS1 url中携带参数的获取方法
2018/10/09 Javascript
laydate如何根据开始时间或者结束时间限制范围
2018/11/15 Javascript
JavaScript实现与使用发布/订阅模式详解
2019/01/19 Javascript
vue登录页面cookie的使用及页面跳转代码
2019/07/10 Javascript
开源一个微信小程序仪表盘组件过程解析
2019/07/30 Javascript
返回上一个url并刷新界面的js代码
2020/09/12 Javascript
python用Pygal如何生成漂亮的SVG图像详解
2017/02/10 Python
python分割列表(list)的方法示例
2017/05/07 Python
Python与R语言的简要对比
2017/11/14 Python
Python实现合并同一个文件夹下所有txt文件的方法示例
2018/04/26 Python
Python配置虚拟环境图文步骤
2019/05/20 Python
python 五子棋如何获得鼠标点击坐标
2019/11/04 Python
Python控制台输出时刷新当前行内容而不是输出新行的实现
2020/02/21 Python
python学习之使用Matplotlib画实时的动态折线图的示例代码
2021/02/25 Python
彻底解决pip下载pytorch慢的问题方法
2021/03/01 Python
美国最大的在线水培用品商店:GrowersHouse.com
2018/08/14 全球购物
小学教师年度个人总结
2015/02/05 职场文书
物业保安辞职信
2015/05/12 职场文书
红白喜事主持词
2015/07/06 职场文书
2019商业计划书格式、范文
2019/04/24 职场文书
2019财务转正述职报告
2019/06/27 职场文书
如何书写你的职业生涯规划书?
2019/06/27 职场文书
关于感恩老师的古诗句
2019/08/20 职场文书
《狼王梦》读后感:可怜天下父母心
2019/11/01 职场文书
Html5获取用户当前位置的几种方式
2022/01/18 HTML / CSS
Python通用验证码识别OCR库ddddocr的安装使用教程
2022/07/07 Python