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 

  • 相关阅读:
    单例模式简介
    WebSocket简介
    向数据库中插入非空字段并赋初值
    MD5加(解)密代码实现
    DES字符串加(解)密代码实现
    常见状态码
    13.Roman to Integer 
    14.Longest Common Prefix
    20.Valid Parentheses
    26.Remove Duplicates from Sorted Array
  • 原文地址:https://www.cnblogs.com/craig/p/1205501.html
Copyright © 2011-2022 走看看