jQuery仿yahoo首页弹出层效果

前段看到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


本篇文章来源于 cssrain.cn 原文链接:http://www.cssrain.cn/article.asp?id=811
本篇文章来源于 cssrain.cn 原文链接:http://www.cssrain.cn/article.asp?id=811
本篇文章来源于 cssrain.cn 原文链接:http://www.cssrain.cn/article.asp?id=811

原文地址:https://www.cnblogs.com/luluping/p/1439120.html