<!DOCTYPE html>

<html>

<head lang="en">

  <meta charset="UTF-8">

  <title></title>

  <style type="text/css">

    .ad {

      position: fixed;

      right: ;

      bottom: ;

      width: 230px;

      height: 120px;

      background-image: url(imgs/ad.jpg);

      display: none;

    }

    .ad span {

      position: absolute;

      right: ;

      top: ;

      width: 40px;

      height: 18px;

      background-image: url(imgs/h.jpg);

      cursor: pointer;

    }

  </style>

  <script src="../jquery-1.11.1.min.js"></script>

  <script>

    $(document).ready(function() {

      $(".ad")

        .slideDown("normal")

        .slideUp("slow")

        .fadeIn()

        .children("span").click(function() {

          $(this).parent().fadeOut();

        });

    });

  </script>

</head>

<body>

  <div class="ani">我是内容</div>

  <div class="ad">

    <span></span>

  </div>

</body>

</html>

jquery版右下角弹窗效果的更多相关文章

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

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

  2. winform下如何实现右下角弹窗效果

    [DllImport("user32")] private static extern bool AnimateWindow(IntPtr hwnd, int dwTime, in ...

  3. JQuery实现的弹窗效果

    这是笔者实际项目中的一个需求,我们先来看看特效. 页面加载时弹出窗口,点击关闭按钮,窗口消失并呈现动画效果. 实现代码如下: <!DOCTYPE HTML PUBLIC "-//W3C ...

  4. jquery版tab切换效果

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

  5. 【转载】jquery版的网页倒计时效果

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  6. jquery版的网页倒计时效果

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  7. jquery实现登录后右下角弹窗提醒（附带简单样式）

    页面代码如下:   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...

  8. jQuery实现广告弹窗

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

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

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

随机推荐

  1. JAVA入门2019-JAVA配置（windows7和10通用）IDE推荐和相关软件

    如何安装JDK 首先,略过"什么是JDK",非要问,这就是编译环境,JRE是运行环境.一个写程序,一个部署运行. 下载的方法:百度 java se 或者openJDK(两个差不多, ...

  2. 如何在python中读写和存储matlab的数据文件(*.mat)

    使用sicpy.io即可.sicpy.io提供了两个函数loadmat和savemat,非常方便. 以前也有一些开源的库(pymat和pymat2等)来做这个事, 不过自从有了numpy和scipy以 ...

  3. oo作业第四单元总结暨结课总结

    目录 一.第四单元作业架构设计 1.第一次UML作业架构设计 2.第二次UML作业架构设计 二.架构设计和OO方法理解演进 三.测试理解与实践的演进 四.课程收获总结 五.三个具体改进建议 一.第四单 ...

  4. java编程基础——二叉树的镜像

    题目描述 操作给定的二叉树,将其变换为源二叉树的镜像. 题目代码 /** * @program: JavaCode * @description: 操作给定的二叉树,将其变换为源二叉树的镜像. * 二 ...

  5. tomcat的启动和部署

    方法/步骤 1 一.安装JDK和Tomcat 1,安装JDK:直接运行jdk-7-windows-i586.exe可执行程序,默认安装即可. 备注:路径可以其他盘符,不建议路径包含中文名及特殊符号. ...

  6. js点击拉拽轮播图pc端移动端适配

    <div class="content"> <button class="left">left</button> <b ...

  7. Duizi and Shunzi HDU - 6188 (贪心）2017 广西ACM／ICPC

    Duizi and Shunzi Time Limit: 6000/3000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) ...

  8. PAT 乙级 1024

    题目 题目地址:PAT 乙级 1024 题解 模拟题,重点需要考虑到各种不同情况:简单来说一下: 因为输入格式固定,所以把不同的部分分别存储和处理可以在很大程度上简化运算:其中需要考虑最多的就是小数部 ...

  9. git bash学习3 -简单杂乱知识点记录

    branch 新建分支 git init git add git commit 先新建一个仓库以及master 然后新建分支 git branch BranchName 然后切换分支 git chec ...

  10. 二十九、MySQL 序列使用

    MySQL 序列使用 MySQL 序列是一组整数:1, 2, 3, ...,由于一张数据表只能有一个字段自增主键, 如果你想实现其他字段也实现自动增加,就可以使用MySQL序列来实现. 本章我们将介绍 ...