js,jQuery实现可关闭悬浮框广告特效,兼容(谷歌,火狐,Ie)

时间:2022-09-17 19:58:54

注意不能直接用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 &plus; jQuery 实现元素自动滚动到底部,兼容IE、FF、Chrome

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

  2. Android音视频通话过程中最小化成悬浮框的实现(类似Android8&period;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&comma;jquery&comma;css&comma;html5特效

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

随机推荐

  1. 获取html 中的内容 将前台的数据获取到后台

    使用js创建一个form表单 ,使用post上传到后台中 下面是代码.在获取html内容的时候使用了js节点来获取内容. parent:父节点.上一级的节点 siblings:兄弟节点.同一级别的节点 ...

  2. javascript &lbrack;object&comma;Object&rsqb;

    今天给html标签的属性赋值为对象时,发现取出来的值为 [object,Object],感觉有点奇怪. 代码如下: <!DOCTYPE html> <html> <hea ...

  3. CSS盒子模型的理解

    标准的CSS盒子模型包括:内容(content).填充(padding).边框(border).边界(margin) 这些属性,可以把它转移到我们日常生活中的盒子(箱子)上来理解,日常生活中所见的盒子 ...

  4. Git学习笔记(四)

    一.忽略特殊文件 在Git工作区的根目录下创建一个特殊的.gitignore文件,然后把要忽略的文件名填进去,Git就会自动忽略这些文件. 不需要从头写.gitignore文件,GitHub已经为我们 ...

  5. Xcode中文乱码问题

    老师给拷贝的程序用Xcode打开中文显示是乱码,而预览里面是正常显示的,Xcode默认编码UTF-8没错的,怎么办呢? 解决办法:用自带的文本编辑器打开,全选,复制,Xcode中打开文件,粘贴,ok~ ...

  6. 简单的XML和JSON数据的处理

    一.XML格式装换成json数据格式 using System; using System.Collections.Generic; using System.Linq; using System.W ...

  7. java中的finally用return也挡不住

    今晚做了科达的题,有一题就是这个意思,我自以为return中断一切,然而事实摆在眼前:

  8. Uiautomator之入门

    优点:1.可以对所有操作进行自动化,操作简单: 2.不需要对被测程序进行重签名,且,可以测试所有设备上的程序,比如~某APP,比如~拨号,比如~发信息等等    3.对于控件定位,要比robotium ...

  9. Grafana展示報表數據的配置(二)

    一.Grafana以圖表的形式展示KPI報表的結果數據1.按照日期顯示數據達標量與未達標量2.顯示當前報表的最大值.最小值.平均值.總量3.報表結果數據的鏈接分享與頁面嵌入,用戶無需登錄直接訪問報表統 ...

  10. java中的ArrayList 、List、LinkedList、Collection

    原文地址: http://www.cnblogs.com/liqiu/p/3302607.html 一.基础介绍(Set.List.Map) Set(集):集合中的元素不按特定方式排序,并且没有重复对 ...