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

最新推荐文章于 2023-03-16 15:54:01 发布

别动我代码儿

最新推荐文章于 2023-03-16 15:54:01 发布

阅读量1.8k

点赞数 1

分类专栏：开发工具工作笔记文章标签： javascript 前端 echarts

本文链接：https://blog.csdn.net/weixin_45176415/article/details/123502209

版权

工作笔记同时被 2 个专栏收录

17 篇文章 0 订阅

订阅专栏

开发工具

4 篇文章 0 订阅

订阅专栏

文章目录

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

使用场景

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) {
        // IE11
        ele.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);
});

别动我代码儿

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
实现点击显示退出大屏，鼠标悬浮3秒消失

文章目录使用场景一、大屏实现二、鼠标不移动消失使用场景1. echarts图表显示的时候会使用到大屏幕及2. 滑动鼠标几秒之后取消鼠标。一、大屏实现在此使用原生js展示demo；点击展示大屏，退出全屏 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=
复制链接

扫一扫