zoukankan
html css js c++ java
jquery之超简单的div显示和隐藏特效demo
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
>
查看全文
相关阅读:
家用游戏机简史
九:二叉搜索树与双向链表(二叉搜索树转为有序双向链表)
诺心(LECAKE) | 氪加
微博书 | 氪加
王利芬对话蒲易 ——花店如何成为高端电商?_北京_歇会儿网
王利芬对话蒲易 ——花店如何成为高端电商?_线下活动报名_优米网
团队介绍 | 魅动 Magic Motion
魅动成人用品情趣跳蛋女用自慰器具 魅惑紫【图片 价格 品牌 报价】-京东商城
最新创业好项目 | 投资项目推荐 | 数据库 | 氪加 特效
Fancy
原文地址:https://www.cnblogs.com/zhangchenliang/p/2092570.html
最新文章
Android HttpLoggingInterceptor的用法简介
Android 安卓直播开源: RTMP 推流SDK
Error: org.apache.mahout.math.CardinalityException: Required cardinality 10 but got 30问题解决办法
Mahout项目开发环境搭建(EclipseMyEclipse + Maven)
关于大数据项目创建时所需setting.xml(博主推荐)
Mahout应用
[ERROR] Failed to execute goal org.apache.maven.plugins:maven-compiler-plugin:3.0:compile (default-compile) 问题解决
3.1 Broker Configs 官网剖析(博主推荐)
3. CONFIGURATION官网剖析(博主推荐)
2.5 Legacy APIs官网剖析(博主推荐)
热门文章
2.4 Connect API官网剖析(博主推荐)
2.3 Streams API 官网剖析(博主推荐)
用图灵机器人高速创建微信公众帐号
Kali Linux 安全渗透教程<第三更>1.2 安全渗透所需工具
Lua,Lua API,配置文件
linux进程间通讯-System V IPC 信号量
数字语音信号处理学习笔记——语音信号的短时频域分析(2)
Threejs 官网
nginx日志每日定时写入Hdfs
WPF老矣,尚能饭否——且说说WPF今生未来(下):安心
Copyright © 2011-2022 走看看