jQuery 制作一个 从屏幕上方弹出的div

前几天客户的需求想做一个总屏幕上方滑下一个层的效果。

我想了想决定用jQuery来实习这个效果比较好。

 

首先下载一个jQuery的脚本包。

在这个地址可以下载到 http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js

 

animate属性是用来实现滑动的效果。top决定滑动的div出现的位置，负值表示移出了屏幕。

 

$('#note').animate({ top: '-50' }, 500, function() { //滑动中实现的方法 });

 

具体实现代码：

js代码

function out() { if ($('#img_jiantou').attr("src") == "Images/up.gif") { $('#note').animate({ top: '-50' }, 500, function() { //$(this).css({display:'none', top:'-100px'}); $('#img_jiantou').attr("src", "Images/down.gif"); $('#sqjt').attr("title", "展开搜索框"); }); } else { $('#note').animate({ top: '0' }, 500, function() { $('#img_jiantou').attr("src", "Images/up.gif"); $('#sqjt').attr("title", "隐藏搜索框"); }); } }

 

html代码：

<div id="note"> <div class="search_desk"> <img src="Images/6464_033.png" mce_src="Images/6464_033.png" class="search_img" /> <div class="search_txt">搜索</div> <input type="text" name="serch" value="" class="textbox" /> <div class="selects"><select id="Select1"> <option selected="selected" value="1">互助资源</option> <option value="2">服务采集</option> <option value="3">人才服务</option> <option value="4">创盟文件</option> <option value="5">会员信息</option> </select></div> <input type="submit" name="sib" class="go" value="" /> </div> <div style="clear:both" mce_style="clear:both"></div> <div class="b_search_div" id="sqjt" onclick="javascript:out();" title="隐藏搜索框"><img src="Images/up.gif" mce_src="Images/up.gif" border="0" id="img_jiantou" /></div> </div>

 

效果图

展开效果

 

收起效果：

 

下载地址：http://download.csdn.net/source/2482159

 

呵呵，大家可以自己试试！！！！！