记忆盒子

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

首页搜索目录
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">

Tags: JavaScript  

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

 

上一篇: 强悍!Google不动声色的启用了即时搜索功能?
下一篇: 在ZBlog首页第一篇文章中添加AdSense的方法,IE/Firefox测试通过
  • 8.evlos
  • http://www.evlos.org
  • 呵呵 jQuery就像另外一个编程语言似地 ~ 很强 ~!
    Liwen 于 2009-12-15 22:50:36 回复
    不错!确实好强,更多更强的东西等着去挖掘!
  • 2009-12-15 22:37:37 回复该留言

发表评论:

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

订阅博客                   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.