admin 管理员组

文章数量: 887007

实现点击显示退出大屏，鼠标悬浮3秒消失

文章目录

  • 使用场景
  • 一、大屏实现
  • 二、鼠标不移动消失

使用场景

1.  echarts图表显示的时候会使用到大屏幕及
2.  滑动鼠标几秒之后取消鼠标。

一、大屏实现

在此使用原生js展示demo；点击展示大屏，退出全屏

 <!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>Document</title><style>.sider{background-color: aqua;width: 100%;height: 400px;margin: 0 auto;text-align: left;}</style>
</head>
<body><div class="sider"><button  id="btn" >点击全屏</button></div><script>window.onload = function () {document.getElementById('btn').onclick=function(){if(this.innerText === '点击退出全屏'){this.innerText = '点击全屏';handleUnFull()}else{this.innerText = '点击退出全屏';handfull()}}// 全屏显示function handfull () {var ele = document.documentElement;// console.log('全屏', ele);if (ele.requestFullscreen) {// HTML W3C 提议ele.requestFullscreen();} else if (ele.mozRequestFullScreen) {// IE11ele.mozRequestFullScreen();} else if (ele.webkitRequestFullscreen) {// Webkit (works in Safari5.1 and Chrome 15)ele.webkitRequestFullscreen();} else if (ele.msRequestFullscreen) {// Firefox (works in nightly)ele.msRequestFullscreen();}}// 退出预览全屏function  handleUnFull () {// console.log('退出');if (document.exitFullscreen) {document.exitFullscreen();} else if (document.mozExitFullScreen) {document.mozExitFullScreen();} else if (document.webkitExitFullscreen) {document.webkitExitFullscreen();}}
}</script></body>
</html>

二、鼠标不移动消失

利用window监听mousemove去判断设置鼠标的样式

// 增加定时器去监听移动事
var mousemove = null;
window.addEventListener('mousemove', (e)=>{if (mousemove) {clearTimeout(mousemove);document.body.style.cursor = 'auto';}mousemove = setTimeout(() => {document.body.style.cursor = 'none';}, 3000);
});

本文标签： 实现点击显示退出大屏，鼠标悬浮3秒消失

版权声明：本文标题：实现点击显示退出大屏，鼠标悬浮3秒消失 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.freenas.com.cn/jishu/1732352784h1533562.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。