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

JavaScript实现飘窗功能

news 2025/12/22 16:21:56

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

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

Linux应用开发之网络套接字编程(实例篇)

服务端与客户端单连接 服务端代码 #include <sys/socket.h> #include <sys/types.h> #include <netinet/in.h> #include <stdio.h> #include <stdlib.h> #include <string.h> #include <arpa/inet.h> #include <pthread.h> …...

编程新知 2025/12/21 18:00:15

.Net框架，除了EF还有很多很多......

文章目录 1. 引言2. Dapper2.1 概述与设计原理2.2 核心功能与代码示例基本查询多映射查询存储过程调用 2.3 性能优化原理2.4 适用场景 3. NHibernate3.1 概述与架构设计3.2 映射配置示例Fluent映射XML映射 3.3 查询示例HQL查询Criteria APILINQ提供程序 3.4 高级特性3.5 适用场…...

编程新知 2025/12/12 1:01:45

转转集团旗下首家二手多品类循环仓店“超级转转”开业

6月9日&#xff0c;国内领先的循环经济企业转转集团旗下首家二手多品类循环仓店“超级转转”正式开业。 转转集团创始人兼CEO黄炜、转转循环时尚发起人朱珠、转转集团COO兼红布林CEO胡伟琨、王府井集团副总裁祝捷等出席了开业剪彩仪式。 据「TMT星球」了解&#xff0c;“超级…...

编程新知 2025/12/16 14:36:58

ESP32 I2S音频总线学习笔记（四）： INMP441采集音频并实时播放

简介 前面两期文章我们介绍了I2S的读取和写入&#xff0c;一个是通过INMP441麦克风模块采集音频&#xff0c;一个是通过PCM5102A模块播放音频&#xff0c;那如果我们将两者结合起来&#xff0c;将麦克风采集到的音频通过PCM5102A播放&#xff0c;是不是就可以做一个扩音器了呢…...

编程新知 2025/12/16 9:28:58

ETLCloud可能遇到的问题有哪些？常见坑位解析

数据集成平台ETLCloud&#xff0c;主要用于支持数据的抽取&#xff08;Extract&#xff09;、转换&#xff08;Transform&#xff09;和加载&#xff08;Load&#xff09;过程。提供了一个简洁直观的界面&#xff0c;以便用户可以在不同的数据源之间轻松地进行数据迁移和转换。…...

编程新知 2025/12/21 21:32:12

汇编常见指令

汇编常见指令 一、数据传送指令 指令功能示例说明MOV数据传送MOV EAX, 10将立即数 10 送入 EAXMOV [EBX], EAX将 EAX 值存入 EBX 指向的内存LEA加载有效地址LEA EAX, [EBX4]将 EBX4 的地址存入 EAX&#xff08;不访问内存&#xff09;XCHG交换数据XCHG EAX, EBX交换 EAX 和 EB…...

编程新知 2025/11/4 20:56:54

uniapp中使用aixos 报错

问题&#xff1a; 在uniapp中使用aixos&#xff0c;运行后报如下错误&#xff1a; AxiosError: There is no suitable adapter to dispatch the request since : - adapter xhr is not supported by the environment - adapter http is not available in the build 解决方案&…...

编程新知 2025/11/29 21:26:48

【C++特殊工具与技术】优化内存分配(一)：C++中的内存分配

目录 一、C 内存的基本概念​ 1.1 内存的物理与逻辑结构​ 1.2 C 程序的内存区域划分​ 二、栈内存分配​ 2.1 栈内存的特点​ 2.2 栈内存分配示例​ 三、堆内存分配​ 3.1 new和delete操作符​ 4.2 内存泄漏与悬空指针问题​ 4.3 new和delete的重载​ 四、智能指针…...

编程新知 2025/12/19 23:45:39

libfmt: 现代C++的格式化工具库介绍与酷炫功能

libfmt: 现代C的格式化工具库介绍与酷炫功能 libfmt 是一个开源的C格式化库&#xff0c;提供了高效、安全的文本格式化功能&#xff0c;是C20中引入的std::format的基础实现。它比传统的printf和iostream更安全、更灵活、性能更好。 基本介绍 主要特点 类型安全&#xff1a…...

编程新知 2025/9/14 12:09:11

Vue3中的computer和watch

computed的写法 在页面中 <div>{{ calcNumber }}</div>script中 写法1 常用 import { computed, ref } from vue; let price ref(100);const priceAdd () > { //函数方法 price 1price.value ; }//计算属性 let calcNumber computed(() > {return ${p…...

编程新知 2025/11/8 20:34:42