当前位置： 首页 > news >正文

JavaScript实现飘窗功能

news 2026/4/3 8:28:21

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

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;"> <ahref="这里需要自己填写自己的路径"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 tagstr = 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); }}
}

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

相关文章：

JavaScript实现飘窗功能

实现飘窗功能很简单 html代码 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Document</title…...

编程日记 2023/12/13 17:21:33

Docker笔记：容器转换成镜像，导出导入镜像，数据拷贝，查看日志

docker commit 将容器转换成镜像 可以把容器转换成镜像镜像没有写入权限&#xff0c;但可以通过修改容器把容器制作成新镜像启动容器后&#xff0c;就给容器提供了一个可写层&#xff0c; 在容器里&#xff0c;可安装软件&#xff0c;可创建文件 …转换成镜像&#xff0c;之后…...

编程日记 2023/12/13 17:19:32

串行计时芯片D1380/D1381，2.0V~5.5V 工作电流: 2V时 与TTL 兼容，采用DIP8、SOP8封装

D1380/D1381是一个带秒、分、时、日、日期、月、年的串行时钟保持芯片,每个月多少天以及闰年能自动调节, D1380/D1381低功耗工作方式, D1380/D1381用若干寄存器存储对应信息&#xff0c;一个32.768kHz 的晶振校准时钟&#xff0c;为了使用最小弓|脚&#xff0c;D1380/D1381使用…...

编程日记 2023/12/13 17:16:28

中间件系列 - Redis入门到实战(基础篇)

前言 1.学习视频&#xff1a; 黑马程序员Redis入门到实战教程&#xff0c;深度透析redis底层原理redis分布式锁企业解决方案黑马点评实战项目 2. 本内容仅用于个人学习笔记&#xff0c;如有侵扰&#xff0c;联系删除 3. 本章学习目标&#xff1a; 初始Redis 认识NoSQL认识Redi…...

编程日记 2023/12/13 17:14:26

项目经理和产品经理该如何选择？

最近很多人咨询“项目经理跟产品经理该怎么选&#xff0c;我更适合哪个&#xff1f;”“项目经理跟产品经理哪个更有钱途 ”“项目经理转产品经理好转吗”等等&#xff0c;今天就一次性说清楚项目经理跟产品经理有什么区别&#xff0c;应该怎么选择。 不想看长篇大论的&#x…...

编程日记 2023/12/13 17:13:24

java WebSocket带参数处理使用

1、webSocket实现代码 Component public class WebSocketStompConfig {//这个bean的注册,用于扫描带有ServerEndpoint的注解成为websocket// ,如果你使用外置的tomcat就不需要该配置文件Beanpublic ServerEndpointExporter serverEndpointExporter() {return new ServerEndpoi…...

编程日记 2023/12/13 17:06:19

OkHttp: 拦截器和事件监听器

文章目录 1. 拦截器1. 拦截器链2. 实际案例1. 注册为应用拦截器2. 注册为网络拦截器 3. 如何选择用哪种拦截器1. 应用拦截器2. 网络层拦截器3. 重写请求4. 重写响应 4. 可用性 2. 事件监听器1. 请求的生命周期2. EventListener使用案例3. EventListener.Factory4. 调用失败的请…...

编程日记 2023/12/13 17:05:18

总结一些vue3小知识2

1.el-tree-select和el-tree组件报错&#xff08;有的下拉选项选择不了&#xff0c;一点击就报错&#xff0c;但是有的却能选择&#xff0c;不会报错&#xff09; 原因:就如同v-for一样&#xff0c;需要添加key才不会出现渲染错误&#xff0c;而el-tree-select和el-tree组件需要…...

编程日记 2023/12/13 17:03:16

【Excel设置动态图表】

设置系列&#xff0c;设置水平轴标签。 效果如图&#xff1a; 经验总结&#xff1a; 方法1&#xff1a;如果设置A、B列为水平轴标签&#xff0c;目前无法设置只是日期为横轴&#xff0c;店铺名称只在最下面显示一个&#xff0c;只能并排1列显示。 优点&#xff1a;如果多选…...

编程日记 2023/12/13 17:02:15

用 C 写一个卷积神经网络

用 C 写一个卷积神经网络 深度学习领域最近发展很快&#xff0c;前一段时间读transformer论文《Attention Is All You Need》时&#xff0c;被一些神经网络和深度学习的概念搞得云里雾里&#xff0c;其实也根本没读懂。发现深度学习和传统的软件开发工程领域的差别挺大&#xf…...

编程日记 2023/12/13 17:00:13

直面双碳目标，优维科技携手奥意建筑打造绿色低碳建筑数智云平台

优维“双碳”战略合作建筑 为落实创新驱动发展战略&#xff0c;增强深圳工程建设领域科技创新能力&#xff0c;促进技术进步、科技成果转化和推广应用&#xff0c;根据《深圳市工程建设领域科技计划项目管理办法》《深圳市住房和建设局关于组织申报2022年深圳市工程建设领域科…...

编程日记 2023/12/13 16:58:11

docker 基础入门

docker 基础入门 引言 在当今快速演进的软件开发领域&#xff0c;Docker 已经成为一个革命性的工具&#xff0c;它极大地改变了我们构建、部署和管理应用程序的方式。作为一种开源容器化平台&#xff0c;Docker 提供了一个轻量级且一致的环境&#xff0c;使得软件能够在几乎任…...

编程日记 2023/12/13 16:55:09

HarmonyOS：NativeWindow 开发指导

场景介绍 NativeWindow 是 HarmonyOS 本地平台化窗口&#xff0c;表示图形队列的生产者端。开发者可以通过 NativeWindow 接口进行申请和提交 Buffer&#xff0c;配置 Buffer 属性信息。 针对 NativeWindow&#xff0c;常见的开发场景如下&#xff1a; ● 通过 NativeWindow…...

编程日记 2023/12/13 16:54:08

汉威科技传感器为农业加点“智慧”

农业是国家之根本&#xff0c;历来受到高度重视&#xff0c;在央视《传感中国》系列节目中&#xff0c;智慧农业独占一期&#xff0c;重要性不言而喻。 随着传感器、物联网、GIS、大数据、5G、人工智能、区块链等技术的快速发展&#xff0c;智慧农业成为种植、养殖行业的新趋势…...

编程日记 2023/12/13 16:50:05

springboot listener、filter登录实战

转载自&#xff1a; www.javaman.cn 博客系统访问&#xff1a; http://175.24.198.63:9090/front/index 登录功能 1、前端页面 采用的是layui-admin框架&#xff0c;文中的验证码内容&#xff0c;请参考作者之前的验证码功能 <!DOCTYPE html> <html lang"zh…...

编程日记 2023/12/13 16:49:04

【数据结构—栈的实现（数组栈）】

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言 一、栈 1.1栈的概念及结构 二、栈的实现 2.1头文件的实现—Stack.h 2.2源文件的实现—Stack.c 2.3源文件的测试—test.c 三、栈的实际测试数据展示 3.1正常的出…...

编程日记 2023/12/13 16:48:03

Linux安装Halo(个人网站)

项目简介 1.代码开源:Halo 的项目代码开源在 GitHub 上且处于积极维护状态&#xff0c;截止目前已经发布了 109 个版本。你也可以在上面提交你的问题或者参与代码贡献。2.易于部署:推荐使用 Docker 的方式部署 Halo&#xff0c;便于升级&#xff0c;同时避免了各种环境依赖的问…...

编程日记 2023/12/13 16:45:01

Java - Spring中Bean的循环依赖问题

什么是Bean的循环依赖 A对象中有B属性。B对象中有A属性。这就是循环依赖。我依赖你&#xff0c;你也依赖我。 比如&#xff1a;丈夫类Husband&#xff0c;妻子类Wife。Husband中有Wife的引用。Wife中有Husband的引用。 Spring解决循环依赖的机理 Spring为什么可以解决set s…...

编程日记 2023/12/13 16:39:56

使用 Python 实现简单的爬虫框架

爬虫是一种自动获取网页内容的程序&#xff0c;它可以帮助我们从网络上快速收集大量信息。在本文中&#xff0c;我们将学习如何使用 Python 编写一个简单的爬虫框架。 一、请求网页 首先&#xff0c;我们需要请求网页内容。我们可以使用 Python 的 requests 库来发送 HTTP 请…...

编程日记 2023/12/13 16:38:55

Activiti七大接口，28张表详解

Activiti七大接口&#xff0c;28张表详解 7大接口 RepositoryService&#xff1a;提供管理流程部署和流程定义API。 RuntimeService&#xff1a;提供运行时流程实例进行管理与控制API。 TaskService&#xff1a;提供流程任务管理API。 IdentityService&#xff1a;提供对流程…...

编程日记 2023/12/13 16:37:54

PDF-Extract-Kit-1.0效果展示：高精度表格识别与公式还原真实案例集

PDF-Extract-Kit-1.0效果展示&#xff1a;高精度表格识别与公式还原真实案例集 想象一下&#xff0c;你手头有一份满是复杂表格和数学公式的PDF学术论文&#xff0c;或者一份财务报告。你需要把里面的数据提取出来&#xff0c;做成Excel表格进行分析&#xff0c;或者把那些复杂…...

编程新知 2026/4/3 6:51:55

数仓分层设计避坑指南：从ODS到ADS，我的团队踩过的5个典型雷区与优化方案

数仓分层设计避坑指南&#xff1a;从ODS到ADS&#xff0c;我的团队踩过的5个典型雷区与优化方案 三年前接手公司数据中台重构项目时&#xff0c;我们团队曾天真地认为数仓分层不过是教科书式的流程化操作。直到某次大促期间&#xff0c;凌晨三点被警报吵醒——ADS层报表查询超时…...

编程新知 2026/4/3 6:45:51

Chord视觉定位模型实战案例：自动驾驶道路元素（车道线/交通灯/行人）定位

Chord视觉定位模型实战案例&#xff1a;自动驾驶道路元素&#xff08;车道线/交通灯/行人&#xff09;定位 在真实自动驾驶场景中&#xff0c;单纯依赖传统目标检测模型往往面临泛化能力弱、小目标漏检、遮挡鲁棒性差等问题。而Chord——这个基于Qwen2.5-VL的多模态视觉定位服…...

编程新知 2026/4/3 6:01:03

C++ 异常安全与 RAII 模式结合

C异常安全与RAII模式结合&#xff1a;构建健壮资源管理体系 在C开发中&#xff0c;异常处理与资源管理是保证程序健壮性的核心挑战。传统的手动资源释放容易因异常抛出导致泄漏&#xff0c;而RAII&#xff08;资源获取即初始化&#xff09;模式通过对象生命周期自动化管理资源…...

编程新知 2026/4/3 4:55:56

Qwen3.5-9B企业应用：法务合同关键条款提取+风险点标注案例

Qwen3.5-9B企业应用&#xff1a;法务合同关键条款提取风险点标注案例 1. 项目背景与价值 在法务工作中&#xff0c;合同审查是一项耗时且容易出错的任务。传统的人工审查方式需要律师逐条阅读合同文本&#xff0c;识别关键条款并标注潜在风险点&#xff0c;这个过程通常需要数…...

编程新知 2026/4/3 4:23:28

Laravel Stats Tracker设备检测技术解析：精准识别移动端与桌面端

Laravel Stats Tracker设备检测技术解析&#xff1a;精准识别移动端与桌面端 【免费下载链接】tracker Laravel Stats Tracker 项目地址: https://gitcode.com/gh_mirrors/tr/tracker Laravel Stats Tracker是一款强大的Laravel统计跟踪工具&#xff0c;它提供了精准的设…...

编程新知 2026/4/3 3:55:12

【独家首发】CPython内存管理策略白皮书（基于v3.9–v3.13源码比对）：37处关键宏定义、12个GC阈值参数、8类对象内存布局差异

第一章&#xff1a;CPython内存管理策略全景概览CPython 作为 Python 官方解释器&#xff0c;其内存管理机制融合了引用计数、循环垃圾回收&#xff08;GC&#xff09;与分代回收策略&#xff0c;形成一套兼顾实时性与鲁棒性的综合体系。理解该机制对诊断内存泄漏、优化对象生命…...

编程新知 2026/4/3 3:00:24

DLSS Swapper：3步解锁游戏性能倍增的AI优化工具

DLSS Swapper&#xff1a;3步解锁游戏性能倍增的AI优化工具 【免费下载链接】dlss-swapper 项目地址: https://gitcode.com/GitHub_Trending/dl/dlss-swapper DLSS Swapper是一款专为PC游戏玩家设计的深度学习超级采样(DLSS)版本管理工具&#xff0c;通过智能环境诊断、…...

编程新知 2026/4/3 2:52:22

仅限首批内测开发者获取：CPython无GIL预编译二进制+无锁标准库API速查表（含ABI兼容性矩阵与降级熔断方案）

第一章&#xff1a;Python无锁GIL环境下的并发模型概览Python 的全局解释器锁&#xff08;GIL&#xff09;长期被视为多线程 CPU 密集型任务的瓶颈。然而&#xff0c;随着 CPython 3.13 的正式引入“实验性无锁 GIL”&#xff08;--without-pymalloc 配合 --with-gildisabled 构…...

编程新知 2026/4/3 2:46:15

Linux下C/C++高效调试工具与技巧全解析

1. Linux终端下C/C调试工具演进史作为一名长期在Linux环境下开发C/C程序的老兵&#xff0c;我深刻理解调试工作对开发效率的影响。很多人对GDB的印象还停留在原始的命令行界面&#xff0c;实际上经过多年发展&#xff0c;终端下的调试工具已经形成了完整的生态体系。从最基础的…...

编程新知 2026/4/3 2:13:41