jquery之超简单的div显示和隐藏特效demo
闲着无聊，看到某视频网站上讲的DIV显示和隐藏的效果，自己也写了一个。
觉得还是挺简单的。
前端改变世界！嘿嘿，还挺有成就感
<!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>
直接复制到HTML文件里运行就行了。
我没有服务器，所以传不了DEMO。。。。
jquery之超简单的div显示和隐藏特效demo的更多相关文章
- css控制div显示／隐藏方法及２种方法比较原码 - czf164的专栏 - 博客频道 - CSDN.NET
body{ font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI& ...
- jq 简单实现 table 显示和隐藏
在做table显示和隐藏的时候,需要用到节点的问题.不要用id.循环的时候id都是一样的. 这样一个简单的tr显示和隐藏就实现了.也可以将click 换成别的事件.
- 【Web】CSS实现鼠标悬停实现显示与隐藏 特效
鼠标悬停实现显示与隐藏特效 简单记录 - 慕课网 Web前端 步骤四:鼠标悬停实现显示与隐藏特效 初步掌握定位的基本使用,以及CSS选择器更高级的运用,完成一个网页中必会的鼠标经过隐藏显示特效. 实现 ...
- jquery判断滚动到某个div显示底部按钮
判读滚动某个div显示底部按钮 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta char ...
- div显示和隐藏
它是实现比较简单.style.display控制层隐藏或显示属性. <html> <body> <script> function show(){ document ...
- jquery控制css的display属性(显示与隐藏)
jquery控制div的显示与隐藏,很方便的. 例如: $("#id").show()表示display:block, $("#id").hide()表示dis ...
- jquery实现很简单的DIV拖动
今天用jquery实现了一个很简单的拖动...实现思路很简单 如下: 在thickbox 弹出层内实现拖拽DIV,那么得进行一下相对宽高的运算:必须加上相对于可见窗口宽高和弹出层宽高之间的差: ...
- css超简单实现div页面居中【适合做弹出框】
1.前言 现在项目中用到弹出框的话大部分都是直接用控件的.不过有控件虽方便,但有时候会有冲突的地方.我上次用layui的弹出框控件,然后也用到了百度的编辑器uEditor,然后一切都好好的,结果编辑赋 ...
- -第3章 jQuery方法实现下拉菜单显示和隐藏
知识点 jquery 的引入方式 本地下载引入 在线引入 children 只获取子元素,不获取孙元素 show() 显示. hide() 隐藏. 完整代码 <!-- Author: XiaoW ...
随机推荐
- LoadRunner 中的 Unique Number 参数类型小结
- 洛谷P1291 [SHOI2002]百事世界杯之旅 [数学期望]
题目传送门 百事世界杯之旅 题目描述 “……在2002年6月之前购买的百事任何饮料的瓶盖上都会有一个百事球星的名字.只要凑齐所有百事球星的名字,就可参加百事世界杯之旅的抽奖活动,获得球星背包,随声听, ...
- 最短路 之 floyd 算法
Floyd 在我认为这是最短路算法中最简单的一个,也是最low的一个. 所以我们组一位大佬给他起了一个新的名字,叫做超时!!! (其实如果数据范围很小的话,这个算法还是蛮好用的!!) 这个算法比较简单 ...
- WSDL语法
<什么是WSDL语言> WSDL(网络服务描述语言,Web Services Description Language)是一门基于 XML 的语言,用于描述 Web Services 以及 ...
- 【LYOI 212】「雅礼集训 2017 Day8」价（二分匹配+最大权闭合子图）
「雅礼集训 2017 Day8」价 内存限制: 512 MiB时间限制: 1000 ms 输入文件: z.in输出文件: z.out [分析] 蛤?一开始看错题了,但是也没有改,因为不会做. 一开 ...
- 「SCOI2015」情报传递
「SCOI2015」情报传递 题目描述 奈特公司是一个巨大的情报公司,它有着庞大的情报网络.情报网络中共有 \(n\) 名情报员.每名情报员可能有若干名(可能没有)下线,除 \(1\) 名大头目外其余 ...
- S数
题目大意: 定义f(x)为x各位数字之和,问[l,r]区间内有多少数满足f(x)*f(x)=f(x*x). 思路: 刚开始暴力打表,发现所有数的位都在0..3之间,然后直接枚举每一位,最坏情况下运算规 ...
- bzoj 2056: gift? 高精度？
2056: gift? 高精度? Time Limit: 10 Sec Memory Limit: 1 MB Description Input 输入的第一行为一个整数t. 接下来t行,每行包含 ...
- git提交时”warning: LF will be replaced by CRLF“提示
今天把项目做完之后,然后用Git准备提交代码的时候,遇到warning: LF will be replaced by CRLF警告. 当时在网上查了资料,发现很多的解决办法都是:修改git全局配置, ...
- 某DP题目5
题意 一个游戏里有k种装备,一开始等级为1,每打败一个怪兽,会随机掉落一件一种类型的装备,它的等级为[1,t+1]中的随机一个数,t为当前佩戴的类型的装备的等级,若掉落t+1等级的装备,就会佩戴该装备 ...