闲着无聊，看到某视频网站上讲的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的更多相关文章

  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. Linux中find用法

    Linux中find用法 linux常用命令 find -name april* 在当前目录下查找以april开始的文件 find -name april* fprint file 在当前目录下查找以 ...

  2. 在LoadRunner中从数组类型的参数随机取值的方法

    在LoadRunner中从数组类型的参数随机取值的方法 使用web_reg_save_param做关联后,有时候会有多个匹配值. 为了模仿用户行为随机取一个值为后续transcation所用,可以使用 ...

  3. CodeForces 785A Anton and Polyhedrons

    简单判断. 分别判断每个单词是几面体,加起来就是答案. #include <cstdio> #include <cmath> #include <cstring> ...

  4. C51中的xdata

    今天在写公司芯片对应的.H文件时,在定义寄存器的时候出现一个问题. 我们芯片的寄存器地址是定义在片外RAM区的,不能使用sfr这样的关键字来进行定义. 后来查阅了对应的资料才发现定义寄存器有很多种方法 ...

  5. data:image/png;base64这什么玩意

    周末下载了个开源的cms系统,基于java. jeecms 这是官网链接 后台页面采用VUE技术全面进行了改版 我勒个去,啥玩意,无非就是js的框架罢了.vue文件 之后再后台管理页面调试的时候发现了 ...

  6. 【JAVAWEB学习笔记】26_Linux基础：简介安装、常用命令和JDK、Mysql、Tomcat的安装

    Linux基础 学习目标 1.了解Linux的简介与安装 2.掌握Linux常用的命令 3.掌握Linux系统上JDK.Mysql.Tomcat的安装 一.Linux的简介 1．Linux的概述 Li ...

  7. Unity全面优化

    前言 Unity的项目优化已经是老生常谈,很多人在项目完成之后,即便创意新颖,也会觉得差强人意,原因就在于没有做详细的项目优化.众所周知,Unity是一个综合性的3D开发引擎,其中包含图像渲染,逻辑处 ...

  8. 快速傅里叶变换(FFT)相关内容汇总

    (原稿:https://paste.ubuntu.com/p/yJNsn3xPt8/) 快速傅里叶变换,是求两个多项式卷积的算法,其时间复杂度为$O(n\log n)$,优于普通卷积求法,且根据有关证 ...

  9. bzoj4144 [AMPPZ2014]Petrol

    link 题意: 给一个n个点m条边的带权无向图,其中k个点是加油站,每个加油站可以加满油,但不能超过车的油量上限.有q个询问,每次给出x,y,b,保证x,y都是加油站,问一辆油量上限为b的车从x出发 ...

  10. JDBC中使用Preparement对象修改个人多账户密码

    在日常生活中,人们可能会遇到想同时修改自己所有账户的密码,这个时候再用批量处理已经不好使了,因为我们要处理的是某个人的多个账户,而不是所有人的,那么怎么才能实现呢?经过大量的测试,我写了一个单元测试代 ...