这是笔者实际项目中的一个需求，我们先来看看特效。

页面加载时弹出窗口，点击关闭按钮，窗口消失并呈现动画效果。

实现代码如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <title>New Web Project</title>

        <script type="text/javascript" src="js/jquery-1.5.min.js"></script>

        <style type="text/css">

            #infobox{

                position:absolute;

                width:480px;

                height:300px;

                border:#ccc solid 1px;

                z-index: 9999;

            }

            #infobox_header h1{

                height:30px;

                font-size: 18px;

                margin-top:0px;

                line-height: 30px;

                text-align: center;

                background-image:url("image/header_bg.png");

            }

            #infobox_header h1 #close_btn{

                width: 15px;

                height: 15px;

                border:#ccc solid 1px;

                float: right;

                background-image: url("image/close.png");

                margin-top:5px;

                margin-right:5px;

                cursor: pointer;

            }

            #noticeinfo{

                width:440px;

                height:240px;

                margin-left: auto;

                margin-right:auto;

            }

        </style>

    </head>

    <body>

        <div id="infobox">

            <div id="infobox_header">

                <h1>公告信息<div id="close_btn">&nbsp;</div></h1>

            </div>

            <div id="noticeinfo">

                <p>重大通知，本行于端午节推出xxxx活动，活动内容xxxx,活动截至日期xxxx-xx-xx。</p>

            </div>

        </div>

    </body>

    <script type="text/javascript">

        $("#infobox").hide();

        $(document).ready(function(){

            $("#infobox").slideDown(2000);

        });

        $("#infobox").css({

            "left":($(document).width() - 480) / 2,

            "top":($(document).height() - 300) / 2

        });

        $("#close_btn").click(function(){

            //$("#infobox").fadeOut(2000);

            $("#infobox").hide(2000);

        });

        $(window).resize(function(){

            $("#infobox").css({

            "left":($(document).width() - 480) / 2,

            "top":($(document).height() - 300) / 2

            });

        });

    </script>

</html>

源码下载：http://download.csdn.net/detail/rongbo_j/8822805

图片资源可以从源码中获取。

JQuery实现的弹窗效果的更多相关文章

  1. 一个基于jQuery写的弹窗效果(附源码)

    最近项目中频繁遇到需要弹出窗口的功能,一直使用浏览器默认的Alert和Confirm弹窗,感觉视觉效果不是那么好,而从网上下载的话又找不到合适的,找到的话有些也是十分臃肿,有时候感觉学习配置的功夫自己 ...

  2. jquery版右下角弹窗效果

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  3. 16种基于 CSS3 & SVG 的创意的弹窗效果

    在去年,我给大家分享了<基于 CSS3 的精美模态窗口效果>,而今天我要与大家分享一些新鲜的想法.风格和趋势变化,要求更加适合现代UI的不同的效果.这组新模态窗口效果包含了一些微妙的动画, ...

  4. jQuery实现广告弹窗

    首先设置一个固定的窗口位于右下角,效果如下: 代码: jQuery实现广告弹窗.html 之后将该窗口初始设为隐藏,通过代码实现3秒自动显示,5秒自动隐藏,其效果如下: <!DOCTYPE ht ...

  5. 用CSS3动画特效实现弹窗效果

    提示:如果大家觉得本篇实现的弹窗效果有用,可持续关注.接下会添加更多效果并且封装成插件,这样使用就方便了.效果查看: https://heavis.github.io/hidialog/index.h ...

  6. 使用 Sticky-Kit 实现基于 jQuery 的元素固定效果

    元素固定效果在网页中应用得很多,比较常见的使用场景有改进导航,显示广告.Sticky-Kit 是一个非常方便的 jQuery 插件,简化了创建/管理粘元素,有复杂的使用功能.这些功能包括:处理多个固定 ...

  7. jQuery模仿人类打字效果插件typetype

    typetype是一款模仿人类打字效果的jQuery插件,typetype非常轻巧,文件不到2K,gzipped压缩后只有578字节,但模仿的效果非常逼真,一字一字的顿出和回删效果,让人惊叹不止,喜欢 ...

  8. jquery实现章节目录效果

    <html><head><title>jquery实现章节目录效果</title> <script type="text/javascr ...

  9. Image Wall - jQuery & CSS3 图片墙效果

    今天我们要为您展示如何基于 jQuery 和 CSS3 创建一个整洁的图片墙效果.我们的想法是在页面上洒上一些大小不同的缩略图,并在当我们点击图片时候显示丝带,会显示一些描述,再次点击缩略图时,丝带将 ...

随机推荐

  1. Comparable与Comparator区别（实现和使用）

    一.Comparable接口 1.Comparable接口是什么? 此接口强行对实现它的每个类的对象进行整体排序.此排序被称为该类的自然排序 ,类的 compareTo 方法被称为它的自然比较方法 . ...

  2. 【转】.NET MVC控制器分离到类库的方法

    在.ASP.NET MVC的开发中,我们创建完项目之后,ASP.NET MVC是已Model-Controller-View的形式存在的,在创建项目自动生成的内容上Model我们很容易分离成类库,所以 ...

  3. Firefox Quantum：开发者版本 推荐

    为生民,不谋利 欢迎您使用 Firefox 开发者版本.使用此版本可获得最新功能.高速性能,以及您打造开放 Web 所需的开发工具. https://www.mozilla.org/zh-CN/fir ...

  4. iOS开发者账号证书配置及相关工作

    申请到开发者账号,肯定要先配置一下才可以使用,这主要是iOS证书及配置文件: 以下这篇文章写得比较全面,故不再累赘,需要的同学可以看一下: iOS开发证书与配置文件的使用

  5. c# rc4算法，加密解密类

    rc4算法,原理,以密匙生成256位的密匙流,然后以车轮式滚过源数据异或加密. /* * 由SharpDevelop创建. * 用户: YISH * 日期: 04/04/2015 * 时间: 03:0 ...

  6. Kattis - String Matching(kmp)

    String Matching Input The input consists of several test cases. Each test case consists of two lines ...

  7. luogu P2000 拯救世界 生成函数_麦克劳林展开_python

    模板题. 将所有的多项式按等比数列求和公式将生成函数压缩,相乘后麦克劳林展开即可. Code: n=int(input()) print((n+1)*(n+2)*(n+3)*(n+4)//24)

  8. Bzoj 2502: 清理雪道 有上下界网络流_最小流

    好长时间没有写网络流了,感觉好手生.对于本题,设一个源点 $s$ 和 $t$.1.由 $s$ 向每个点连一条没有下界,容量为无限大的边,表示以该点为起点.2.由每个点向 $t$ 连一条没有下界,容量为 ...

  9. fullcalendar日历插件

    https://www.helloweba.net/javascript/231.html

  10. STM32 HAL库 IIC 协议库函数

    /* 第1个参数为I2C操作句柄 第2个参数为从机设备地址 第3个参数为从机寄存器地址 第4个参数为从机寄存器地址长度 第5个参数为发送的数据的起始地址 第6个参数为传输数据的大小 第7个参数为操作超 ...