关于HTML做悬浮窗口

Posted 2023-05-06

我做一个html网页，但是一些没什么重要用处的功能链接为了布局好看漂亮，就准备用悬浮窗口的方式做，就像网店的那些QQ一样，无论怎么上下拖动页面，那个悬浮窗口始终在某一个位置，请各位帮忙解答下，我工作是这个，但是HTML还相当薄弱。。。。谢谢了

楼上的解答基本正确咯
你可以使用css来浮动一个块，建议为浮动div，相关的关键样式为position: fixed，是指布局方式为固定的，为了防止被遮挡一般要搭配z-index:999或者更大的数字，表示该层高度，默认为1。如果一个元素的z-index小于其他元素且位置冲突的话就会被遮挡咯。

然后就是位置的问题，这个可以自行调整啦。 参考技术A <style>
#nav width:150px; height: 400px; border: 1px solid #D4CD49; position:fixed;left:0;top:30%
</style>
<div id="nav"></div>

你看这样行不行

本回答被提问者采纳

python百行代码自制电脑端网速悬浮窗

整体思路

使用psuti.net_io_counters 监控电脑网卡IO

将流量数据格式化，统计每次数据总和保存在本地《流量使用情况.txt》(这个是个缺陷，我只用txt保存，用户可以随意更改，后期完善一下加密保存，隐藏文件信息。)

PyQt窗口制作，两个label，一个网速信息，一个动态图展示，隐藏窗口标题栏，任务栏，窗口全屏幕随意移动，鼠标放到窗口样式变为抓手，鼠标右键菜单栏，退出程序，软件关于。

亨达代理申请退出程序时保存流量总和信息到文件，下次启动先读取流量总和数据。

代码清单

网速获取&&格式化

def gsh(count):

if count < 1024:

return "%.2f B/s" % count

if count < 1048576:

return "%.2f KB/s" % (count / 1024)

count >>= 10

if count < 1048576:

return "%.2f MB/s" % (count / 1024)

count >>= 10

return "%.2f GB/s" % (count / 1024)

def get_data():

old = [0, 0]

new = [0, 0]

net_info = net_io_counters() # 获取流量统计信息

recv_bytes = net_info.bytes_recv

sent_bytes = net_info.bytes_sent

old[0] += recv_bytes

old[1] += sent_bytes

time.sleep(1)

# 当前所收集的数据

net_info = net_io_counters() # 获取流量统计信息

recv_bytes = net_info.bytes_recv

sent_bytes = net_info.bytes_sent

new[0] += recv_bytes

new[1] += sent_bytes

info = []

for i in range(2):

info.append(new[i] - old[i])

return info

窗口界面

class Main(QWidget):

_startPos = None

_endPos = None

_isTracking = False

all_bytes=0

about = "监控电脑网络的上传跟下载网速。 统计网络使用总流量! 作者：旋凯凯旋"

def __init__(self):

super().__init__()

self._initUI()

with open(‘流量使用情况.txt‘, ‘r‘) as f:

self.all_bytes = int(f.read())

def _initUI(self):

self.setFixedSize(QSize(259, 270))

self.setWindowFlags(Qt.FramelessWindowHint | QtCore.Qt.WindowStaysOnTopHint | Qt.Tool)

self.setAttribute(QtCore.Qt.WA_TranslucentBackground) # 设置窗口背景透明

self.label = QtWidgets.QLabel(self)

self.label.setGeometry(QtCore.QRect(0, 0, 259, 111))

self.label.setMinimumSize(QtCore.QSize(259, 111))

self.label.setBaseSize(QtCore.QSize(259, 111))

self.label.setStyleSheet("font: 75 20pt "Adobe Arabic";color:rgb(255,0,0)")

self.label.setAlignment(QtCore.Qt.AlignCenter)

self.label.setObjectName("label")

self.label2 = QtWidgets.QLabel(self)

self.label2.setGeometry(QtCore.QRect(10, 110, 259, 161))

self.label2.setMinimumSize(QtCore.QSize(259, 161))

self.label2.setBaseSize(QtCore.QSize(259, 161))

self.label2.setAlignment(QtCore.Qt.AlignCenter)

self.gif = QMovie(‘1271.gif‘)

self.label2.setMovie(self.gif)

self.label2.setObjectName("label2")

self.gif.start()

self.timer = QtCore.QTimer(self)

self.timer.start(1000)

self.timer.timeout.connect(self.start)

self.setCursor(QCursor(Qt.PointingHandCursor))

self.show()

逻辑函数

def start(self):

Thread(target=self.setSpeed, daemon=True).start()

def setSpeed(self):

info = get_data()

recv_bytes = gsh(info[0]) # 每秒接收的字节

sent_bytes = gsh(info[1]) # 每秒发送的字节

self.all_bytes += sum(info)

if self.all_bytes<1073741824:

all_bytes = self.all_bytes / 1048576

strs="已使用：%.2f Mb"%all_bytes

else:

all_bytes = self.all_bytes / 1073741824

strs = "已使用：%.2f Gb" % all_bytes

self.label.setText("上传：%s 下载：%s %s"%(sent_bytes,recv_bytes,strs)

鼠标事件

def mouseMoveEvent(self, e: QMouseEvent): # 重写移动事件

self._endPos = e.pos() - self._startPos

self.move(self.pos() + self._endPos)

def mousePressEvent(self, e: QMouseEvent):

if e.button() == Qt.LeftButton:

self._isTracking = True

self._startPos = QPoint(e.x(), e.y())

if e.button() == Qt.RightButton:

menu = QMenu(self)

quitAction = menu.addAction("退出程序")

aboutAction=menu.addAction("关于程序")

action = menu.exec_(self.mapToGlobal(e.pos()))

if action == quitAction:

with open(‘流量使用情况.txt‘, ‘w‘) as f:

f.write(str(self.all_bytes))

qApp.quit()

if action == aboutAction:

msg_box = QtWidgets.QMessageBox

msg_box.question(self, "关于", self.about,msg_box.Yes | msg_box.Cancel)

if QMessageBox.Yes:

webbrowser.open(‘https://me.csdn.net/Cxk___‘, new=0, autoraise=True)

def mouseReleaseEvent(self, e: QMouseEvent):

if e.button() == Qt.LeftButton:

self._isTracking = False

self._startPos = None

self._endPos = None

if e.button() == Qt.RightButton:

self._isTracking = False

self._startPos = None

self._endPos = None

库

# -*- coding: utf-8 -*-

import time

import webbrowser

from PyQt5.QtCore import QSize, QPoint, Qt

from PyQt5.QtGui import QMouseEvent, QMovie, QCursor

from PyQt5.QtWidgets import QWidget, QMessageBox, QApplication, QMenu, qApp

from psutil import net_io_counters #net_io_counters 网络输入与输出 如果需要获取单个网卡的io信息，加上pernic=True参数。

from threading import Thread

import sys

from qtpy import QtWidgets, QtCore

运行

if __name__ == ‘__main__‘:

app = QApplication(sys.argv)

ex = Main()

sys.exit(app.exec_()