项目中用js改变样式就像平时吃饭喝水一样不可缺少,隐藏与显示div更是使用频繁,你会不会经常对突然显示与隐藏而不满意呢?来看看下面这段代码:
JavaScript代码
-
-
-
-
-
- function show(){
- $("#divObj").show();
- }
-
-
- function hiden(){
- $("#divObj").hide();
- }
-
- function fadeIn(){
- $("#divObj").fadeIn(2000);
- }
- function fadeOut(){
- $("#divObj").fadeOut(2000);
- }
-
-
- function slideDown(){
- $("#divObj").slideDown();
- }
-
-
- function slideUp(){
- $("#divObj").slideUp();
- }
-
-
-
-
-
- function slideToggle(){
- $("#divObj").slideToggle(2000);
- }
-
-
-
-
-
-
- function toggle(){
- $("#divObj").toggle(2000);
- }
XML/HTML代码
- <h3>div里内容的显示隐藏特效</h3>
- <input type="button" value="显示" onclick="show()"/>
- <input type="button" value="隐藏" onclick="hiden()"/>
- <input type="button" value="淡入" onclick="fadeIn()"/>
- <input type="button" value="淡出" onclick="fadeOut()"/>
- <input type="button" value="窗帘效果展开" onclick="slideDown()"/>
- <input type="button" value="窗帘效果折叠" onclick="slideUp()"/>
- <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>
不多说,点击此处查看演示!
本站原创,转载请标明:来自追梦博客(http://www.wuleilei.com/)
本文地址:http://www.wuleilei.com/Blog/240
相关文章
pardus
没有安装Xcode 就不行了吗