前段看到YAHOO首页一个弹出层效果, 发现还挺实用.
于是想自己做一个.
自己javascript 还不怎么行, 但对jQuery还是比较熟悉.
于是用jquery做了一个.
CSS样式和XHTML结构的话,是使用yahoo的样式.
我只做了 行为层(JS).

具体代码:
     程序代码
$(function(){
    //展开按钮
     $('#Bl_3').click(function(){
     //把外框架设置为显示.
     //把left和top去掉 ,试试.
     //$('#group_id').css({"display":"block"});
     $('#group_id').css({"display":"block","left": "99px", "top": "6px"});
     $('#group').animate({
           left:  "0"
      }, 500);
    })
      //关闭按钮
    $('#closeDiv').click(function(){
      $('#group').animate({
           left:  "-530" 
      }, { queue: false, duration: 500 ,complete: cssrain });
         return false;
     })
     //complete: 完成animate动作后,回调其他函数.
     //把外框架设置为 隐藏.
     function cssrain(){
             $('#group_id').css("display","none");
     }
   
    })

演示:http://www.cssrain.cn/demo/yahoodiv/index.htm
下载:http://www.cssrain.cn/demo/yahoodiv/yahoodiv.rar 

posted on 2008-05-23 09:47  craig  阅读(1224)  评论(0编辑  收藏  举报
我要啦免费统计