记忆盒子

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

首页搜索目录
search
当前主题: 互联网络

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">

标签: JavaScript  

加入本站QQ群(312716741),交流分享网站建设、优化、SEO技术。。。

 

上一篇: 强悍!Google不动声色的启用了即时搜索功能?
下一篇: 在ZBlog首页第一篇文章中添加AdSense的方法,IE/Firefox测试通过
  • 11.熠*
  • 给我的小博客装上了
    Liwen 于 2009-12-16 23:43:55 回复
    是吗?嘿~
  • 2009-12-16 22:47:31 回复该留言
  • 10.尤*
  • 网小没毕业,完全看不懂~~
    Liwen 于 2009-12-16 18:23:06 回复
    那是因为你不需要用到这个东东吧,哈~~Haha
  • 2009-12-16 18:12:59 回复该留言
  • 8.e****
  • 呵呵 jQuery就像另外一个编程语言似地 ~ 很强 ~!
    Liwen 于 2009-12-15 22:50:36 回复
    不错!确实好强,更多更强的东西等着去挖掘!
  • 2009-12-15 22:37:37 回复该留言
  • 7.娱***
  • 果然不是一般的水准
    Liwen 于 2009-12-15 19:11:33 回复
    哈,我也在学,把学到的写下,而已呢.Haha
  • 2009-12-15 19:06:45 回复该留言
  • 5.卢**
  • 你换空间了啊?
    Liwen 于 2009-12-15 15:46:07 回复
    没呀,怎么这么问?What
  • 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)

  • 通过Google订阅本站 通过鲜果订阅本站 通过抓虾订阅本站
  • 通过QQ邮箱订阅本站 通过Yahoo订阅本站 通过有道订阅本站

Search

最新评论及回复

最近留言

网站分类

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

Copyright @2009 All Rights Reserved. 粤ICP备09073737号

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