闲着无聊，看到某视频网站上讲的DIV显示和隐藏的效果，自己也写了一个。

觉得还是挺简单的。

前端改变世界！嘿嘿，还挺有成就感

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>无标题文档</title>
  6. <script src="jquery_last.js" type="text/javascript"></script>
  7. <script type="text/javascript">
  8. $(document).ready(  function(){});
  9. function hiden(){
  10. $("#divObj").hide();//hide()函数,实现隐藏,括号里还可以带一个时间参数(毫秒)例如hide(2000)以2000毫秒的速度隐藏,还可以带slow,fast
  11. }
  12. function slideToggle(){
  13. $("#divObj").slideToggle(2000);//窗帘效果的切换,点一下收,点一下开,参数可以无,参数说明同上
  14. }
  15. function show(){
  16. $("#divObj").show();//显示,参数说明同上
  17. }
  18. function toggle(){
  19. $("#divObj").toggle(2000);//显示隐藏切换,参数可以无,参数说明同上
  20.  
  21. }
  22. function slide(){
  23. $("#divObj").slideDown();//窗帘效果展开
  24. }
  25.  
  26. </script>
  27. </head>
  28.  
  29. <body>
  30. <h3>div里内容的显示隐藏特效</h3>
  31. <input type="button" value="隐藏" onclick="hiden()"/>
  32.  <input type="button" value="显示" onclick="show()"/>
  33.  <input type="button" value="窗帘效果显示2" onclick="slide()"/>
  34.  <input type="button" value="窗帘效果的切换" onclick="slideToggle()"/>
  35.   <input type="button" value="隐藏显示效果切换" onclick="toggle()"/>
  36. <div id="divObj" style="display:none">
  37.         1.测试例子<br/>
  38.         2.测试例子<br/>
  39.         3.测试例子<br/>
  40.         4.测试例子<br/>
  41.         5.测试例子<br/>
  42.         6.测试例子<br/>
  43.         7.测试例子<br/>
  44.         8.测试例子<br/>
  45.         9.测试例子<br/>
  46.         0.测试例子<br/>
  47.     </div>
  48. </body>
  49. </html>

直接复制到HTML文件里运行就行了。

我没有服务器，所以传不了DEMO。。。。

jquery之超简单的div显示和隐藏特效demo的更多相关文章

  1. css控制div显示／隐藏方法及２种方法比较原码 - czf164的专栏 - 博客频道 - CSDN.NET

    body{ font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI& ...

  2. jq 简单实现 table 显示和隐藏

    在做table显示和隐藏的时候,需要用到节点的问题.不要用id.循环的时候id都是一样的. 这样一个简单的tr显示和隐藏就实现了.也可以将click 换成别的事件.

  3. 【Web】CSS实现鼠标悬停实现显示与隐藏 特效

    鼠标悬停实现显示与隐藏特效 简单记录 - 慕课网 Web前端 步骤四:鼠标悬停实现显示与隐藏特效 初步掌握定位的基本使用,以及CSS选择器更高级的运用,完成一个网页中必会的鼠标经过隐藏显示特效. 实现 ...

  4. jquery判断滚动到某个div显示底部按钮

    判读滚动某个div显示底部按钮 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta char ...

  5. div显示和隐藏

    它是实现比较简单.style.display控制层隐藏或显示属性. <html> <body> <script> function show(){ document ...

  6. jquery控制css的display属性(显示与隐藏)

    jquery控制div的显示与隐藏,很方便的. 例如: $("#id").show()表示display:block, $("#id").hide()表示dis ...

  7. jquery实现很简单的DIV拖动

    今天用jquery实现了一个很简单的拖动...实现思路很简单  如下: 在thickbox 弹出层内实现拖拽DIV,那么得进行一下相对宽高的运算:必须加上相对于可见窗口宽高和弹出层宽高之间的差:    ...

  8. css超简单实现div页面居中【适合做弹出框】

    1.前言 现在项目中用到弹出框的话大部分都是直接用控件的.不过有控件虽方便,但有时候会有冲突的地方.我上次用layui的弹出框控件,然后也用到了百度的编辑器uEditor,然后一切都好好的,结果编辑赋 ...

  9. -第3章 jQuery方法实现下拉菜单显示和隐藏

    知识点 jquery 的引入方式 本地下载引入 在线引入 children 只获取子元素,不获取孙元素 show() 显示. hide() 隐藏. 完整代码 <!-- Author: XiaoW ...

随机推荐

  1. ssh自动登录（免密）

    创建公钥 1 ssh-keygen -t rsa 无视它出来的任何提示,欢快的一路回车到底吧~ 把公钥复制到远程主机 把公钥id_rsa.pub复制到远程机器的 /home/username/.ssh ...

  2. poj1789(prim)

    prim和kruskal都是求解最小生成树的算法.这道题题意就是有N个字符串就是N个节点,而字符串之间的距离就是节点边的长度,求其最小生成树的边权和. 由于是第一次用prim,所以在求安全边的时候采用 ...

  3. FastReport.Net使用：[24]其他控件（邮政编码(Zip Code),网格文本(Cellular Text)以及线性刻度尺(Linear Gauge)）

    邮政编码(Zip Code) Zip Code仅支持数字(0~9) Zip Code支持数据列绑定,表达式,文本等模式 可通过修改SegmentCount属性的值来确定Zip Code的位数. 数字右 ...

  4. .net中session的使用

    什么是Session? Session即会话,是指一个用户在一段时间内对某一个站点的一次访问. Session对象在.NET中对应HttpSessionState类,表示"会话状态" ...

  5. Codeforces 622 F. The Sum of the k-th Powers

    \(>Codeforces \space 622\ F. The\ Sum\ of\ the\ k-th\ Powers<\) 题目大意 : 给出 \(n, k\),求 \(\sum_{i ...

  6. 【bzoj1875】【JZYZOJ1354】[SDOI2009]HH去散步 矩阵快速幂 点边转换

    http://172.20.6.3/Problem_Show.asp?id=1354 http://www.lydsy.com/JudgeOnline/problem.php?id=1875  题意: ...

  7. [BZOJ 4719] 天天爱跑步

    Link: BZOJ 4719 传送门 Solution: 感觉求LCA又有了新姿势啊:$Tarjan$离线$O(n+m)$ 每次递归返回时将子树和父节点合并,如果询问节点已访问过则LCA就是已合并的 ...

  8. 2017-2018-1 JAVA实验站 冲刺 day04

    2017-2018-1 JAVA实验站 冲刺 day04 各个成员今日完成的任务 小组成员 今日工作 完成进度 张韵琪 写博客.进行工作总结 100% 齐力锋 找背景音乐 100% 张浩林 游戏操作说 ...

  9. 没有调用PageHelper.startPage()分页方法，最后还是执行了PageHelper分页方法的原因

    SELECT * FROM ( SELECT TMP_PAGE.*, ROWNUM ROW_ID FROM ( SELECT * FROM ( SELECT A.*, ROWNUM RN FROM ( ...

  10. sqlserver -- 学习笔记（一）自定义函数（学习总结，备忘）

    SQL Server自定义函数,以前只在书上看过,没有动手去敲一敲,今天刚好接触到,看了几篇博文学习了下.做好备忘很重要!! (@_@)Y Learn from:http://www.cnblogs. ...