JavaScript实现飘窗功能

实现飘窗功能很简单
在这里插入图片描述

html代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="js/AdMove.js"></script>
</head>

<body>
    <div class="float-container" id="ad1" style="position: absolute; left: 1069.59px; top: 240.294px;"> <a
            href="这里需要自己填写自己的路径"
            title="" target="_blank" style="text-decoration: none;">
            <div style="width: 140px;line-height: 60px; background-color: #ff9232;color:#fff; font-size: 16px;text-align: center;
                font-weight: bold;border-radius: 10px;">
                平台自律公约
            </div>
        </a>
    </div>
</body>

<script>
    var ad1 = new AdMove("ad1", true);
    ad1.Run();
</script>

</html>

JavaScript

function addEvent(obj, evtType, func, cap) {
    cap = cap || false;
    if (obj.addEventListener) {
        obj.addEventListener(evtType, func, cap);
        return true;
    } else if (obj.attachEvent) {
        if (cap) {
            obj.setCapture();
            return true;
        } else {
            return obj.attachEvent("on" + evtType, func);
        }
    } else {
        return false;
    }
}
function removeEvent(obj, evtType, func, cap) {
    cap = cap || false;
    if (obj.removeEventListener) {
        obj.removeEventListener(evtType, func, cap);
        return true;
    } else if (obj.detachEvent) {
        if (cap) {
            obj.releaseCapture();
            return true;
        } else {
            return obj.detachEvent("on" + evtType, func);
        }
    } else {
        return false;
    }
}
function getPageScroll() {
    var xScroll, yScroll;
    if (self.pageXOffset) {
        xScroll = self.pageXOffset;
    } else if (document.documentElement && document.documentElement.scrollLeft) {
        xScroll = document.documentElement.scrollLeft;
    } else if (document.body) {
        xScroll = document.body.scrollLeft;
    }
    if (self.pageYOffset) {
        yScroll = self.pageYOffset;
    } else if (document.documentElement && document.documentElement.scrollTop) {
        yScroll = document.documentElement.scrollTop;
    } else if (document.body) {
        yScroll = document.body.scrollTop;
    }
    arrayPageScroll = new Array(xScroll, yScroll);
    return arrayPageScroll;
}


// 获取页面的高度、宽度
function GetPageSize() {
    var xScroll, yScroll;
    if (window.innerHeight && window.scrollMaxY) {
        xScroll = window.innerWidth + window.scrollMaxX;
        yScroll = window.innerHeight + window.scrollMaxY;
    } else {
        if (document.body.scrollHeight > document.body.offsetHeight) { // all but Explorer Mac    
            xScroll = document.body.scrollWidth;
            yScroll = document.body.scrollHeight;
        } else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari    
            xScroll = document.body.offsetWidth;
            yScroll = document.body.offsetHeight;
        }
    }

    var windowWidth, windowHeight;
    if (self.innerHeight) { // all except Explorer    
        if (document.documentElement.clientWidth) {
            windowWidth = document.documentElement.clientWidth;
        } else {
            windowWidth = self.innerWidth;
        }
        windowHeight = self.innerHeight;
    } else {
        if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode    
            windowWidth = document.documentElement.clientWidth;
            windowHeight = document.documentElement.clientHeight;
        } else {
            if (document.body) { // other Explorers    
                windowWidth = document.body.clientWidth;
                windowHeight = document.body.clientHeight;
            }
        }
    }

    // for small pages with total height less then height of the viewport    
    if (yScroll < windowHeight) {
        pageHeight = windowHeight;
    } else {
        pageHeight = yScroll;
    }

    // for small pages with total width less then width of the viewport    
    if (xScroll < windowWidth) {
        pageWidth = xScroll;
    } else {
        pageWidth = windowWidth;
    }
    arrayPageSize = new Array(pageWidth, pageHeight, windowWidth, windowHeight);
    return arrayPageSize;
}



//广告脚本文件 AdMove.js
/*
例子   加<div></div>  是为了判断飘窗内容为空时隐藏飘窗
<div id="Div2">
    <div></div>
    ***** content ******
    </div>
</div>
var ad=new AdMove("Div2");
ad.Run();
*/

var AdMoveConfig = new Object();
AdMoveConfig.IsInitialized = false;
AdMoveConfig.AdCount = 0;
AdMoveConfig.ScrollX = 0;
AdMoveConfig.ScrollY = 0;
AdMoveConfig.MoveWidth = 0;
AdMoveConfig.MoveHeight = 0;
AdMoveConfig.Resize = function () {
    var winsize = GetPageSize();
    AdMoveConfig.MoveWidth = winsize[2];
    AdMoveConfig.MoveHeight = winsize[3];
    AdMoveConfig.Scroll();
}
AdMoveConfig.Scroll = function () {
    var winscroll = getPageScroll();
    AdMoveConfig.ScrollX = winscroll[0];
    AdMoveConfig.ScrollY = winscroll[1];
}
addEvent(window, "resize", AdMoveConfig.Resize);
addEvent(window, "scroll", AdMoveConfig.Scroll);
function AdMove(id, addCloseButton) {
    if (!AdMoveConfig.IsInitialized) {
        AdMoveConfig.Resize();
        AdMoveConfig.IsInitialized = true;
    }
    AdMoveConfig.AdCount++;
    var obj = document.getElementById(id);
    obj.style.position = "absolute";
    obj.style.zIndex = "999";
    var W = AdMoveConfig.MoveWidth - obj.offsetWidth;
    var H = AdMoveConfig.MoveHeight - obj.offsetHeight;
    var x = W * Math.random(), y = H * Math.random();
    var rad = (Math.random() + 1) * Math.PI / 6;
    var kx = Math.sin(rad), ky = Math.cos(rad);
    var dirx = (Math.random() < 0.5 ? 1 : -1), diry = (Math.random() < 0.5 ? 1 : -1);
    var step = 1;
    var interval;
    if (addCloseButton) {
        var closebtn = document.createElement("span");
        closebtn.className = 'close_btn';
        closebtn.innerHTML = "关闭";
        closebtn.style.color = "#ff9232";
        closebtn.style.position = "relative"
        closebtn.style.marginLeft = "110px"
        closebtn.style.top = "-80px"
        obj.appendChild(closebtn);

        closebtn.onclick = function () {
            obj.style.display = "none";
            clearInterval(interval);
            closebtn.onclick = null;
            obj.onmouseover = null;
            obj.onmouseout = null;
            obj.MoveHandler = null;
            AdMoveConfig.AdCount--;
            if (AdMoveConfig.AdCount <= 0) {
                removeEvent(window, "resize", AdMoveConfig.Resize);
                removeEvent(window, "scroll", AdMoveConfig.Scroll);
                AdMoveConfig.Resize = null;
                AdMoveConfig.Scroll = null;
                AdMoveConfig = null;
            }
        }
        /*判断飘窗内容是否为空，为空就隐藏*/
        function removeHTMLTag(str) {
            //str = str.replace(/<\/?[^>]*>/g,''); //去除HTML tag
            str = str.replace(/[ | ]*\n/g, '\n'); //去除行尾空白
            str = str.replace(/[\r\n]/g, ""); //去除多余空行
            str = str.replace(/ /ig, '');//去掉&nbsp;
            return str;
        }
        var oDiv = obj.getElementsByTagName('div')[0];
        if (removeHTMLTag(oDiv.innerHTML) == "") {
            obj.style.display = "none";
        }

    }
    obj.MoveHandler = function () {
        obj.style.left = (x + AdMoveConfig.ScrollX) + "px";
        obj.style.top = (y + AdMoveConfig.ScrollY) + "px";
        rad = (Math.random() + 1) * Math.PI / 6;
        W = AdMoveConfig.MoveWidth - obj.offsetWidth;
        H = AdMoveConfig.MoveHeight - obj.offsetHeight;
        x = x + step * kx * dirx;
        if (x < 0) { dirx = 1; x = 0; kx = Math.sin(rad); ky = Math.cos(rad); }
        if (x > W) { dirx = -1; x = W; kx = Math.sin(rad); ky = Math.cos(rad); }
        y = y + step * ky * diry;
        if (y < 0) { diry = 1; y = 0; kx = Math.sin(rad); ky = Math.cos(rad); }
        if (y > H) { diry = -1; y = H; kx = Math.sin(rad); ky = Math.cos(rad); }
    }
    this.SetLocation = function (vx, vy) { x = vx; y = vy; }
    this.SetDirection = function (vx, vy) { dirx = vx; diry = vy; }
    this.Run = function () {
        var delay = 10;
        interval = setInterval(obj.MoveHandler, delay);
        obj.onmouseover = function () { clearInterval(interval); }
        obj.onmouseout = function () { interval = setInterval(obj.MoveHandler, delay); }
    }
}

如果觉得不错可以一件三连支持一下

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/241192.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

基于yolov2深度学习网络的人员跌倒检测识别matlab仿真

基于yolov2深度学习网络的人员跌倒检测识别matlab仿真

目录 1.算法运行效果图预览 2.算法运行软件版本 3.部分核心程序 4.算法理论概述 4.1 YOLOv2深度学习网络 4.2 人员跌倒检测识别原理 5.算法完整程序工程 1.算法运行效果图预览 2.算法运行软件版本 matlab2022a 3.部分核心程序 clc; clear; close all; warning off; a…
阅读更多...
2023最新软件测试面试题（带答案）

2023最新软件测试面试题（带答案）

1. 请自我介绍一下(需简单清楚的表述自已的基本情况&#xff0c;在这过程中要展现出自信&#xff0c;对工作有激情&#xff0c;上进&#xff0c;好学) 面试官您好&#xff0c;我叫###&#xff0c;今年26岁&#xff0c;来自江西九江&#xff0c;就读专业是电子商务&#xff0c;毕…
阅读更多...
【Zerotier】自建PLANET服务器内网地址连接

【Zerotier】自建PLANET服务器内网地址连接

之前已经完成了【Zerotier】通过docker自建PLANET服务器&#xff0c;但是遇到一个问题&#xff0c;因为各种原因&#xff0c;内网里面的ZeroTier Client无法通过PLANET服务器的公网地址连接&#xff0c;愁怀了这下。在经过多方测试验证后&#xff0c;可以采取重新生成一个PLANE…
阅读更多...
应收应付模块如何启用？

应收应付模块如何启用？

应收应付模块启动操作手册 系统平台——系统工具——系统状态控制 查看要修改的日期 财务结账到指定期限后进行联用 点击与总账联用按钮
阅读更多...
自激活T细胞为肿瘤免疫治疗提供新思路—高分文献分享

自激活T细胞为肿瘤免疫治疗提供新思路—高分文献分享

CD28是在所有小鼠和人类T细胞上表达的共刺激受体&#xff0c;用来调节T细胞受体(TCR) 的响应。异常的CD28 信号传导是癌症、自身免疫和病毒感染中T细胞功能障碍的决定性特征之一。早期的一些研究表明CD28对CD4 T细胞更重要&#xff0c;但也有越来越多的研究者发现其对CD8 T细胞…
阅读更多...
（反序列化）小记录

（反序列化）小记录

目录 [CISCN 2023 华北]ez_date 绕过MD5和sha1强相关绕过 date()绕过 payload [FSCTF 2023]ez_php [CISCN 2023 华北]ez_date <?php error_reporting(0); highlight_file(__FILE__); class date{public $a;public $b;public $file;public function __wakeup(){if(is_a…
阅读更多...
【Pyqt5】QWidget: Must construct a QApplication before a QWidget

【Pyqt5】QWidget: Must construct a QApplication before a QWidget

问题说明&#xff1a; pyqt6切换为pyqt5时&#xff0c;引用自定义类时报错&#xff0c;QWidget: Must construct a QApplication before a QWidget 解决办法 修改导入python包的导入顺序后可以正常运行 使用pyqt5时需将pyqtgraph放到pyqt5之后导入
阅读更多...
HT4125 低压CMOS 缓冲门器件 单电源电压转换

HT4125 低压CMOS 缓冲门器件 单电源电压转换

​​亿胜盈科HT4125 是一款低压CMOS 缓冲门器件&#xff0c;可运行在针对便携式和电池设备的更宽电压范围内。 其采用了较低阀值电路来设计此输入&#xff0c;以便匹配Vcc 3.3V 时的1.8V 输入逻辑&#xff0c;并且可被用 在1.8V 至3.3V 电平上行转换器功能中。此外&#xff0c;…
阅读更多...
如何在 Windows 7/8/10/11 中恢复已删除的文件 [7 种方式]

如何在 Windows 7/8/10/11 中恢复已删除的文件 [7 种方式]

当文件堆积时&#xff0c;您可以删除其中一些文件以获得更多存储空间或组织良好的环境。然而&#xff0c;最糟糕的是 如果您不小心删除了运行 Windows 11、10、8、7 或 XP 的 PC 上的重要文件&#xff0c;就会发生。在这种情况下&#xff0c;您 应该看到 如何在Windows上恢复已…
阅读更多...
【云原生kubernets】Deployment的功能与应用

【云原生kubernets】Deployment的功能与应用

一、导读 所有的 Deployment 对象都是由 Kubernetes 集群中的 DeploymentController 进行管理&#xff0c;DeploymentController 会在启动时通过 Informer 监听三种不同资源的通知&#xff0c;Pod、ReplicaSet 和 Deployment&#xff0c;这三种资源的变动都会触发 DeploymentCo…
阅读更多...
小米路由器4A千兆版如何刷OpenWRT并使用固定地址远程访问

小米路由器4A千兆版如何刷OpenWRT并使用固定地址远程访问

文章目录 前言1. 安装Python和需要的库2. 使用 OpenWRTInvasion 破解路由器3. 备份当前分区并刷入新的Breed4. 安装cpolar内网穿透4.1 注册账号4.2 下载cpolar客户端4.3 登录cpolar web ui管理界面4.4 创建公网地址 5. 固定公网地址访问 前言 OpenWRT是一个高度模块化、高度自…
阅读更多...
UE5 - ArchvizExplorer与Map Border Collection结合 - 实现电子围栏效果

UE5 - ArchvizExplorer与Map Border Collection结合 - 实现电子围栏效果

插件地址&#xff1a; https://www.unrealengine.com/marketplace/zh-CN/product/archviz-explorer https://www.unrealengine.com/marketplace/zh-CN/product/map-border-collection ArchvizExplorer扩展&#xff1a; https://download.csdn.net/download/qq_17523181/8843305…
阅读更多...
逻辑回归原理及代码

逻辑回归原理及代码

逻辑回归原理 线性回归主要用于预测连续的数值输出&#xff0c;基于线性关系模型&#xff0c;其目标是最小化实际值和预测值之间的差异。 逻辑回归主要用于分类问题&#xff0c;尤其是二元分类&#xff0c;它预测属于某一类别的概率&#xff0c;并基于概率输出进行决策&#x…
阅读更多...
这两个管理方法 在现货白银顺势交易中会用得上

这两个管理方法 在现货白银顺势交易中会用得上

我们常说&#xff0c;在现货白银交易中做顺势交易&#xff0c;那盈利的概率会高一些。但是这并不是说做顺势交易就肯定盈利&#xff0c;其实顺势交易也需要投资者去进行管理的&#xff0c;不要以为顺势交易入场之后就万事大吉了。那投资者该如何管理呢&#xff1f;下面我们就来…
阅读更多...
桌面便签软件哪个好用?可以放在桌面上的便签软件使用哪个

桌面便签软件哪个好用?可以放在桌面上的便签软件使用哪个

在现代快节奏的生活中&#xff0c;我们时常感到生活与工作的节奏难以协调。繁琐的工作日程与待办任务繁杂交织&#xff0c;往往让我们束手无策&#xff0c;无法高效地进行协调与分配。 桌面便签工具成为了我们处理这些挑战的得力助手。它不仅能够随时提醒我们完成任务&#xf…
阅读更多...
Leetcode—530.二叉搜索树的最小绝对差【简单】

Leetcode—530.二叉搜索树的最小绝对差【简单】

2023每日刷题&#xff08;五十八&#xff09; Leetcode—530.二叉搜索树的最小绝对差 实现代码 /*** Definition for a binary tree node.* struct TreeNode {* int val;* struct TreeNode *left;* struct TreeNode *right;* };*/ void dfs(struct TreeNode* roo…
阅读更多...
UI设计中的肌理插画是什么样的？

UI设计中的肌理插画是什么样的？

肌理插画本质也和扁平插画差不多&#xff0c;相较扁平插画&#xff0c;肌理插画的层次感、细节更多&#xff0c;也会更立体生动。 肌理插画风格没有描边线&#xff0c;画面轻快&#xff0c;通过色块的明暗来区分每个元素&#xff0c;有点像色彩版的素描&#xff0c;但更简单&a…
阅读更多...
6大最佳目标进度管理软件盘点——团队/个人

6大最佳目标进度管理软件盘点——团队/个人

在当今快节奏的生活和工作中&#xff0c;有效地管理目标和任务对于每个人来说都至关重要。在工作中&#xff0c;我们需要清晰地规划项目目标、安排任务和追踪进度&#xff1b;在生活中&#xff0c;我们也需要合理安排时间、记录重要事项以及追踪个人目标的实现进度。为了更好地…
阅读更多...
张雪峰推荐2023未来专业哪个就业前景好

张雪峰推荐2023未来专业哪个就业前景好

张雪峰推荐未来比较好的专业有&#xff1a;计算机专业、金融专业、法学专业等。这些专业的专业性很强&#xff0c;学完后也容易找工作&#xff0c;就业前景很不错&#xff0c;薪资普遍高于其它行业。 2023年张雪峰推荐未来的专业有哪些&#xff1f; 1、人工智能专业…
阅读更多...
运筹学经典问题（四）：多商品网络流问题

运筹学经典问题（四）：多商品网络流问题

问题描述 多商品网络流问题&#xff08;Multicommodity Network Flow, MCNF&#xff09;是指在一个图网络中&#xff0c;多个商品从各自起点运输到各自终点的问题。 更具体的&#xff0c;给定一个图网络 G ( V , A ) G(V, A) G(V,A)&#xff1a; K K K&#xff1a;表示商品的…
阅读更多...
最新文章

Copyright @ 2022~2023