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