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

  • 相关阅读:
    react native mapbox MarkView只显示一个子组件问题
    react native mapbox 截图压缩(@react-native-mapbox-glmaps)
    @react-native-mapbox-gl/maps语言插件汉化不完善问题
    SQLSERVER优化
    springboot+react整合
    sqlserver求小数取位
    C#中Math.Round() 的真实含义
    Java Nio学习总结(一)
    Linq去重(自定义字段)
    WPF学习记录(一):布局
  • 原文地址:https://www.cnblogs.com/luluping/p/1439120.html
Copyright © 2011-2022 走看看