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

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

实现代码如下：

<!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. 写函数,输入n个数字输出最大值和最小值

    # ,写函数,传入n个数,返回字典{‘max’:最大值,’min’:最小值}# 例如:min_max(2,5,7,8,4) 返回:{‘max’:8,’min’:2}(此题用到max(),min()内置 ...

  2. Tomcat 初探（二） server.xml 配置

    前言 在上一篇文章中,我们在示例中演示了网站的发布,其中涉及到了 server.xml 的修改,本文中我会给大家详细解释一下 server.xml 文件中的节点及其属性的作用,本片文章参考并摘抄了他人 ...

  3. POJ 1128 Frame Stacking 拓扑排序+暴搜

    这道题输出特别坑.... 题目的意思也不太好理解.. 就解释一下输出吧.. 它让你 从下往上输出. 如果有多种情况,按照字典序从小往大输出... 就是这个多种情况是怎么产生的呢. 下面给一组样例. 很 ...

  4. Sqlite基本命令集合（linux/fedora/ubuntu）

    注:fedora自带sqlite3,无需安装,直接输入命令sqlite3即可. ------------Ubuntu在命令行输入sqlite3,确认没有安装在进行--- 1.安装sqlite3 ubu ...

  5. JSON是什么？为JavaScript准备的数据格式

    JSON是什么?为JavaScript准备的数据格式 还不了解JSON是什么?看了下面这篇文章,您对JSON是什么应该能够有了一个比较清晰的概念. JSON 即 JavaScript. Object ...

  6. Java之Foreach语句

    Foreach是for语句的特殊简化版本,但任何时候的foreach语句都可以改写成for语句.Foreach语句在遍历数组等方面为程序员提供了很大的方便 语法如下: For(元素变量 x:遍历对象o ...

  7. 通过adb 设置、删除、获取 系统配置值。

    通过adb 设置.删除.获取 系统配置值. Key定义在:frameworks\base\core\java\android\provider\Settings.java adb shell sett ...

  8. 前端精选文摘：css之BFC 神奇背后的原理（转载）

    一.BFC是什么? 在解释 BFC 是什么之前,需要先介绍 Box.Formatting Context的概念. Box: CSS布局的基本单位 Box 是 CSS 布局的对象和基本单位, 直观点来说 ...

  9. Python_study_day_1_while_if

    1.什么是计算机 cpu:大脑 3GHz 内存:缓冲硬盘和cpu,提高计算机运算速度 硬盘:存储数据 2.编程语言的简单分类 编译型,解释型,混合型 3.python是什么编程语言 解释类语言 //. ...

  10. [USACO17FEB] Why Did the Cow Cross the Road I P (树状数组求逆序对 易错题)

    题目大意:给你两个序列,可以序列进行若干次旋转操作(两个都可以转),对两个序列相同权值的地方连边,求最少的交点数 记录某个值在第一个序列的位置,再记录第二个序列中某个值 在第一个序列出现的位置 ,求逆 ...