注意不能直接用close()命名关闭广告函数，避免冲突。

javascript实现方法：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

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

<head>

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

    <title>无标题文档</title>

    <style type="text/css">

        #apDiv1 {

            position: absolute;

            left: 251px;

            top: 51px;

            width: 529px;

            height: 210px;

            z-index: 2;

            background-color: #0000FF;

        }

        #closebt {

            position: absolute;

            top: 0;

            right: 0;

            background: red;

        }

        #apDiv2 {

            position: absolute;

            left: 128px;

            top: 381px;

            width: 912px;

            height: 18663px;

            z-index: -1;

            background-color: #FF0000;

        }

        -->

    </style>

    <script>

        var xx = 0;

        function init() {//获取元素的top值

            xx = document.getElementById("apDiv1").offsetTop;

        }

        function aa() {

            if (document.body.scrollTop) {//兼容谷歌

                document.getElementById("apDiv1").style.top = xx + document.body.scrollTop + "px";

            } else {//兼容ie，火狐

                document.getElementById("apDiv1").style.top = xx + document.documentElement.scrollTop + "px";

            }

        }

        window.onscroll = aa;

        function closetext() {

            document.getElementById("closebt").style.display="none";

            document.getElementById("apDiv1").style.display="none";

        }

    </script>

</head>

<body onload="init()">

<div id="apDiv1">

    <span id="closebt"><a href="#" onclick="closetext()">可关闭</a></span>

</div>

<div id="apDiv2"></div>

</body>

</html>

jquery实现方法

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style type="text/css">

        #main {

            text-align: center;

        }

        #adver {

            position: absolute;

            left: 50px;

            top: 30px;

            z-index: 2;

        }

    </style>

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

    <script>

        var advertop;

        $(function () {

             advertop=$("#adver").position();//获取到div style中的top值

        })

        $(window).scroll(function () {

            var wintop=$(this).scrollTop();//获取窗口滚动条的top距离

            var x=wintop+advertop;//x用来存储div style中的top值+窗口滚动条的top距离

            $("#adver").css("top",x);//用x重新设置div的css中的top值

        })

    </script>

</head>

<body>

<div id="adver"><img src="data:images/adv.jpg"/></div>

<div id="main"><img src="data:images/main1.jpg"/><img src="data:images/main2.jpg"/><img src="data:images/main3.jpg"/></div>

</body>

</html>

js，jQuery实现可关闭悬浮框广告特效，兼容（谷歌，火狐，Ie）的更多相关文章

  1. JS + jQuery 实现元素自动滚动到底部，兼容IE、FF、Chrome

    HTML代码: <ul class="tasklog-dialog-ul" id="auto_to_bottom"> <li>删除虚拟机 ...

  2. Android音视频通话过程中最小化成悬浮框的实现（类似Android8.0画中画效果）

    关于音视频通话过程中最小化成悬浮框这个功能的实现,网络上类似的文章很多,但是好像还没看到解释的较为清晰的,这里因为项目需要实现了这样的一个功能,今天我把它记录下来,一方面为了以后用到便于自己查阅,一方 ...

  3. Android悬浮框，在Service中打开悬浮窗；在Service中打开Dialog；

    文章介绍了如何在Service中显示悬浮框,在Service中弹出Dialog,在Service中做耗时的轮询操作: 背景需求: 公司的项目现在的逻辑是这样的:发送一个指令,然后3秒一次轮询去查询这个 ...

  4. js实现页面悬浮框

    当滚动条下拉时,悬浮框位置不变,主要是 position:fixed;样式的作用. 当下拉到一定程度,接近footer时,我用js控制div消失,往上拉滚动条时又显示. <!DOCTYPE ht ...

  5. js右侧悬浮框

    示例:屏幕右侧悬浮框 原理:oDiv.style.top = document.documentElement.clientHeight - oDiv.offsetHeight + scrollTop ...

  6. 菜鸟学JS（三）——自动隐藏的悬浮框

    今天写一个小实例,用js和css写一个可以自动隐藏的悬浮框.css肯定是用来控制样式的,js用来控制器显示与隐藏的.显示与隐藏通常有两种方法实现:1,用js控制其显示属性:2,用js控制其大小. 今天 ...

  7. （41）JS运动之右側中间悬浮框（对联悬浮框）

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

  8. JS错误记录 - 右侧悬浮框 - 缓冲运动

    本次练习错误总结: 1.  正确: startMove( document.documentElement.clientHeight - oDiv.offsetHeight + scrollTop); ...

  9. js,jquery,css,html5特效

    包含js,jquery,css,html5特效,源代码 本文地址:http://www.cnblogs.com/roucheng/p/texiao.html 2017新年快乐特效 jQuery最新最全 ...

随机推荐

  1. （转）每天一个linux命令（15）：tail 命令

    场景:每次查看服务端的日志时候都需要反复重新加载服务端的日志.用tail命令可以很方便的查看服务器上的日志更新! tail 命令从指定点开始将文件写到标准输出.使用tail命令的-f选项可以方便的查阅 ...

  2. 管理 Machine - 每天5分钟玩转 Docker 容器技术（47）

    用 docker-machine 创建 machine 的过程很简洁,非常适合多主机环境.除此之外,Docker Machine 也提供了一些子命令方便对 machine 进行管理.其中最常用的就是无 ...

  3. Android高效内存之让你的图片省内存

    Android高效内存之让你的图片省内存 在做内存优化的时候,我们发现除了解决内存泄露问题,剩下的就只有想办法减少真实的内存占用.而在App中,大部分内存可能被我们图片占用了,所以减少图片的内存占用可 ...

  4. java 文件读和写（整理）

    1 读文件 1)按字节读取,FileInputStream用于读二进制文件,如,图片,声音,影像等 /** * 以字节为单位读取文件,常用于读二进制文件,如图片.声音.影像等文件. */ public ...

  5. strtok函数 分类： c++ 2014-11-02 15:24 214人阅读 评论(0) 收藏

    strtok函数是cstring文件中的函数 strtok函数是cstring文件中的函数 其功能是截断字符串 原型为:char *strtok(char s[],const char *delin) ...

  6. JMeter学习笔记-JForum环境搭建

    一.准备环境 1. Java环境安装配置(JDK+JRE+环境变量) 2. Tomcat下载安装 下载地址: 安装教程:http://jingyan.baidu.com/article/870c6fc ...

  7. 用Django做一个省份选择器

    做一个省份选择器 使用django做后端, mysql数据库, jQuery 列出结构主要的文件, 其它配置比较简单 models.py 因为所有数据的结构基本一致, 把所有省份, 市和区全部存储一张 ...

  8. git入门（3）git checkout 和git branch分支的创建和删除

    在一个项目中,需要多人同时开发,协同coding 要求: 开发时请用开发分支daily/0.0.1, 禁止直接使用master分支开发新建分支 git checkout -b daily/0.0.1 ...

  9. git bash命令行使用https协议方式进行克隆和提交到github服务器

    在本地创建一个文件夹来存放远程服务器仓库:如创建一个git8文件夹: 在命令行中,使用git clone https://github.com/serverking/weixin.git进行克隆git ...

  10. python--DenyHttp项目（1）--socket编程：服务器端进阶版socketServer

    在网上看到了SocketServer模块,于是Server端简化: #coding:utf-8 import socketserver class MyTCPHandler(socketserver. ...