前端-页面进度条编写-类似原神登入加载页面

最新推荐文章于 2024-07-19 15:32:49 发布

wdwin133

最新推荐文章于 2024-07-19 15:32:49 发布

阅读量599

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/wdwin133/article/details/119722370

版权

js html css html5

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1、禁止页面缩放

浏览器页面缩放功能的按键分别是：Ctrl + （=/-）、Ctrl + 鼠标滚轮、 Ctrl + （+/-）

1、禁用Ctrl + （= / - / +）

用户按下键盘后触发 document.onkeydown 函数，取得 event 对象()

(event对象代表事件的状态，例如触发event对象的元素、鼠标的位置及状态、按下的键

盘按键等等。event对象只在事件发生的过程中才有效。event的某些属性只对特定的事

件有意义。

比如，fromElement 和 toElement 属性只对 onmouseover 和 onmouseout 事件有意义)

因为兼容性问题：

1、IE把event事件对象作为全局对象window的一个属性；

可以使用event或window.event来访问；
2、FireFox和Chrome等主流浏览器是通过把【事件对象】作为【事件响应函数】的

                        【参数】进行传入；
        3、兼容性的写法是：
                        document.onkeydown = function (event--参数){

const e = event || window.event;

4、event中 ctrlKey 和 metaKey 代表了键盘的 Ctrl 按键（普通键盘）

和 Command/Cmd" ("⌘") 按键（苹果键盘）是否按下（布尔值），

然后“+，-，=”号通过 event.key 获取，如果获取正确，就调用

event.preventDefault() 方法来阻止事件的继续动作

const keyCodeMap = { "Control":true , "+":true, "-":true, "=":true }

document.onkeydown = function (event){

const e = event || window.event;

const ctrlKey = e.ctrlKey|| e.metaKey;

let keyCode = keyCodeMap[e.key];

if(ctrlKey && keyCode){ e.preventDefault(); }

else if(e.detail){ event.returnValue = false; }

}

2、禁用Ctrl + 鼠标滚轮

document.body.addEventListener 添加一个用户点击按钮时触发的事件监听器

type：事件类型

listener：事件要执行的函数

options：布尔值，指定事件冒泡还是事件捕获，可选

先通过event.ctrlKey 是否为true（按下），然后看 event.deltaY 是大于0还是小于0 （表

示上滚下滚），照样用 event.preventDefault() 方法来阻止事件的继续动作

2、固定浏览器窗口大小

let bodyProject = document.getElementById("bodyId");

1、首先获取当前使用的显示器屏幕的尺寸（去掉下面任务栏）

let availWidth = window.screen.availWidth;

let availHeight = window.screen.availHeight;

2、然后设置页面初始尺寸，因为要去掉浏览器顶部工具栏或书签，高度乘以0.85（估算）

如果页面有拖拽浏览器高度，超出0.85后，会自动填充

bodyProject.style.width = availWidth + "px";

bodyProject.style.height = availHeight * 0.85 + "px";

3、完整代码

        window.onload = function bodyBackground(){
            let bodyProject = document.getElementById("bodyId");
            // 除去任务栏的屏幕尺寸
            let availWidth = window.screen.availWidth;
            let availHeight = window.screen.availHeight;
            // 设置页面body 的尺寸
            bodyProject.style.width = availWidth + "px";
            bodyProject.style.height = availHeight * 0.85 + "px";
        }

3、使用CSS3 模拟进度条浮动上下左右居中

给html和body 宽高数值

然后两层div，两层div一样大小

内层div半透明，右浮动，使用 animation 动画减宽度模拟进度条走动

animation：设置所有动画属性的简写属性。

animation-name	规定 @keyframes 动画的名称。
animation-duration	规定动画完成一个周期应花费的时间。
animation-timing-function	规定动画的速度曲线。
animation-delay	规定动画开始的延迟。
animation-iteration-count	规定动画应播放的次数。
animation-direction	定动画是向前播放、向后播放还是交替播放。
animation-fill-mode	元素在不播放动画时的样式（在开始前、结束后，或两者同）。
animation-play-state	规定动画是运行还是暂停。