HTML+JS+CSS 鼠标上下移动页面（非滚动条）
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Mouse Drag Scroll - IE11 Compatible</title><style>body {height: 2000px;/* 为了方便测试滚动效果，设置一个较长的页面 *//* 使用自定义的鼠标指针图片，这里假设图片名为 grab.cur */cursor: url('file:///C:/grab.cur'), default;}/* 定义按下鼠标左键时的鼠标指针样式 */body.dragging {/* 使用自定义的鼠标指针图片，这里假设图片名为 grabbing.cur */cursor: url('file:///C:/grabbing.cur'), default;}</style>
</head><body><!-- 这里可以添加具体的页面内容 --><h1>鼠标拖动滚动页面示例 - 兼容 IE11</h1><script>// 定义变量来跟踪鼠标状态和初始位置var isDragging = false;var startY = 0;var initialScrollTop = 0;var body = document.body;// 获取文档对象var doc = document.documentElement || document.body;// 监听鼠标按下事件if (document.attachEvent) {document.attachEvent('onmousedown', mouseDownHandler);} else {document.addEventListener('mousedown', mouseDownHandler);}function mouseDownHandler(event) {event = event || window.event;// 只有按下鼠标左键时才进行操作if ((event.which && event.which === 1) || (event.button && event.button === 1)) {// 判断是否点击在滚动条上if (isClickOnScrollbar(event)) {return; // 如果点击在滚动条上，不执行后续拖动逻辑}isDragging = true;// 记录鼠标按下时的垂直位置startY = event.clientY;// 记录当前页面的滚动位置initialScrollTop = doc.scrollTop;// 添加 dragging 类，改变鼠标指针样式addClass(body, 'dragging');}}// 判断鼠标是否点击在滚动条上function isClickOnScrollbar(event) {// 获取窗口宽度var windowWidth = window.innerWidth;// 获取文档元素宽度var docWidth = doc.clientWidth;// 计算滚动条宽度var scrollbarWidth = windowWidth - docWidth;// 判断鼠标点击的水平位置是否在滚动条范围内return event.clientX >= windowWidth - scrollbarWidth;}// 监听鼠标移动事件if (document.attachEvent) {document.attachEvent('onmousemove', mouseMoveHandler);} else {document.addEventListener('mousemove', mouseMoveHandler);}function mouseMoveHandler(event) {event = event || window.event;if (isDragging) {// 计算鼠标垂直移动的距离var deltaY = event.clientY - startY;// 根据鼠标移动距离来滚动页面doc.scrollTop = initialScrollTop - deltaY;}}// 监听鼠标松开事件if (document.attachEvent) {document.attachEvent('onmouseup', mouseUpHandler);} else {document.addEventListener('mouseup', mouseUpHandler);}function mouseUpHandler() {// 停止拖动状态isDragging = false;// 移除 dragging 类，恢复鼠标指针样式removeClass(body, 'dragging');}// 监听鼠标离开窗口事件，防止鼠标移出窗口后仍在拖动if (document.attachEvent) {document.attachEvent('onmouseleave', mouseLeaveHandler);} else {document.addEventListener('mouseleave', mouseLeaveHandler);}function mouseLeaveHandler() {isDragging = false;// 移除 dragging 类，恢复鼠标指针样式removeClass(body, 'dragging');}// 兼容 IE11 的添加类名函数function addClass(element, className) {if (element.className.indexOf(className) === -1) {if (element.className === '') {element.className = className;} else {element.className += ' ' + className;}}}// 兼容 IE11 的移除类名函数function removeClass(element, className) {var classNames = element.className.split(' ');var newClassNames = [];for (var i = 0; i < classNames.length; i++) {if (classNames[i] !== className) {newClassNames.push(classNames[i]);}}element.className = newClassNames.join(' ');}</script>
</body></html>
![[C++]使用纯opencv部署yolov12目标检测onnx模型](https://i-blog.csdnimg.cn/direct/27ea19d1b7244a71867c5ced540492ac.png)
