记忆盒子

把记忆装进灰色的盒子，封装起来，那年那月，重新拾起。

导航

JQuery实现的层滑动效果，玄酷实用

作者:Kaka 时间:2009-12-15 3:33:37 浏览: 评论:12

如果你不知道层滑动（SlideToggle）是哪种效果，那么请点击本人做的这个Demo看看。

如果你写过CSS，那么display的样式一定不会陌生，它就如一个标签开关，能控制某个标签的隐藏和显示，在菜单中尤为常见，本人也做了个Demo。

SlideToggle与display，都能实现相同的目的，就是控制标签的隐藏和显示，然而，很显然，SlideToggle的视觉效果比display好一些，display给人一种瞬间的视觉感觉，而SlideToggle则给人一种拖拉的视觉效果，大大增强了用户的使用体验。

事实上，SlideToggle的使用非常普遍了，在不少大型网站都能看到。例如GoDaddy的后台管理界面就在不少地方使用这个效果，用起来感觉非常的不错。

SlideToggle的实现

SlideToggle的实现非常简单，如果只需控制一个标签，那么只要运用如下代码即可：

1、引用JQuery JS文件

<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript"></script>

2、写个JS函数

<script type="text/javascript"> $(function() { $("#mostrar").click(function(event) { $(".box2").slideToggle(); }); }); </script>

说明：mostrar 为点击的标签id ，如：<a href="#" id="mostrar" >点击这里</a>，box2为需要隐藏和显示的层的class 如：<div class="box2">

海外云主机

低至54元 - 可退款

x

标签: JavaScript

※ 网站速度慢？试试网站自动优化工具 ※

扩展阅读
☉location.href在firefox中不起作用  (2009-11-15 23:32:47)
☉解决JSChart画图不支持中文的问题  (2009-11-5 19:54:6)
☉对JSChart未定义的解决方法  (2009-11-4 18:36:53)

12.n******
不太懂啊
2011/10/29 21:21:42 回复该留言

11.熠*
给我的小博客装上了
Liwen 于 2009-12-16 23:43:55 回复
是吗?嘿~
2009/12/16 22:47:31 回复该留言

10.尤*
网小没毕业，完全看不懂~~
Liwen 于 2009-12-16 18:23:06 回复
那是因为你不需要用到这个东东吧,哈~~
2009/12/16 18:12:59 回复该留言

9.回*
還可以能看懂
2009/12/16 14:12:19 回复该留言

8.e****
呵呵 jQuery就像另外一个编程语言似地 ~ 很强 ~！
Liwen 于 2009-12-15 22:50:36 回复
不错!确实好强,更多更强的东西等着去挖掘!
2009/12/15 22:37:37 回复该留言

7.娱***
果然不是一般的水准
Liwen 于 2009-12-15 19:11:33 回复
哈,我也在学,把学到的写下,而已呢.
2009/12/15 19:06:45 回复该留言

6.妮***
来学学`
Liwen 于 2009-12-15 17:39:51 回复
2009/12/15 17:12:36 回复该留言

5.卢**
你换空间了啊？
Liwen 于 2009-12-15 15:46:07 回复
没呀,怎么这么问?
2009/12/15 15:32:51 回复该留言

4.羽*
嗯我是用slideup和down + easing 效果更玄~
Liwen 于 2009-12-15 13:34:55 回复
就是你现在用的菜单那个效果吧,很不错的说!
2009/12/15 13:25:35 回复该留言

3.九*
JQuery？这玩意现在挺流行啊
Liwen 于 2009-12-15 13:28:42 回复
是啊,挺好用的,呵呵~~
2009/12/15 13:18:05 回复该留言

2.j*****
如果是这样的话，我也学会了，哈哈
Liwen 于 2009-12-15 12:34:28 回复
是啊,非常的简单哦,哈~~
2009/12/15 11:00:13 回复该留言

1.s****
感觉不错

翔子博客更换服务器速度更快！欢迎来访哦^_^
Liwen 于 2009-12-15 12:32:09 回复
恩,你的空间真不错,速度很快啊!
2009/12/15 7:15:12 回复该留言

◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。

订阅博客 QQ交流群（312716741）

Search

SEO专题

热门文章

最近发表

最新评论及回复

最近留言

网站分类

Powered By Z-Blog 1.8 Walle Build 91204 Designed by Han'space

Copyright @2009-2024 All Rights Reserved. 粤ICP备14028160号-1

记忆盒子 - 卡卡测速网 - 卡卡教程库
网站测速 - Ping测试 - 路由追踪 - 网站诊断

Powered By Z-Blog 1.8 Walle Build 91204
Copyright @2009-2024 All Rights Reserved.