好久没发了,来随便发发,利用jquery中的slideUp和silideDown来实现。
代码中有注释。
一个简单的上下滑动手风情效果。 首先看看html代码: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> .title{ background-color:#09F; color:#FFF; font-size:14px; padding:10px 0px; text-align:center; cursor:pointer; } .item{ background-color:#F60; color:#FFF; height:200px; } </style> </head> <body> <div id="main" style="200px; margin:0px auto;"> <div style="margin-bottom:5px;"> <div class="title">The One</div> <div class="item">kshdkgskgbbjsdhkg</div> </div> <div style="margin-bottom:5px;"> <div class="title">The Two</div> <div class="item">kshdkgskgbbjsdhkg</div> </div> <div style="margin-bottom:5px;"> <div class="title">The Three</div> <div class="item">kshdkgskgbbjsdhkg</div> </div> </div>
JS部分: 首先还是要引用jquery框架。 $(document).ready(function(){ $("._item").hide(); $("._item:first").show(); $("._title").click(function(){ if($(this).next().is(":hidden")) //判断当前点击的元素的下一个元素是否是hide状态 { $("._item").slideUp(); $(this).next().slideDown(); } }) })
效果演示地址
来源:http://www.colorff.com