zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    C# 日志本地化工具
    javascript面向对象的写法01
    VM12-Pro 安装CentOS7 并配置静态IP出坑记
    基于CentOS7.x安装Nginx-1.18.0
    程序员思维导图、web初学者必备、web前端知识集锦-不断更新中...
    js知识
    swiper的使用
    web 移动端键盘处理-vue移动端那些事
    vue学习计划-vuex生态
    vue 组件复用
  • 原文地址:https://www.cnblogs.com/luluping/p/1439120.html
Copyright © 2011-2022 走看看