原生JS与CSS实现软件卸载对话框功能

2024-10-08 09:53:39

今天给大家分享一个特别有意思的软件卸载对话框，鼠标在整个对话框里移动时，中间的人脸会作出不同的变化，当鼠标悬停到“保留”按钮上时，人脸的表情会变得开心，当鼠标悬停到“卸载”按钮上面时，人脸的表情会变得不开心。

实现效果如下：

实现代码如下，首先是HTML：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>原生JS与CSS实现软件卸载对话框</title>
  <link rel="stylesheet" href="css/confirm.css" rel="external nofollow" >
</head>
<body>
  <section class="Confirm">
    <div class="Confirm-Header">
      <a class="Confirm-Header-Button Confirm-Header-Button_Close" href="javascript: void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></a>
      <a class="Confirm-Header-Button Confirm-Header-Button_Minimize" href="javascript: void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></a>
      <a class="Confirm-Header-Button Confirm-Header-Button_Maximize" href="javascript: void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></a>
      <h1 class="Confirm-Header-Title">软件卸载</h1>
    </div>

    <div class="Confirm-Body">
      <h2 class="Confirm-Body-Title">是否确实要卸载软件？</h2>
      <figure class="Boi" style="--happiness:0.9; --derp:1; --px:0.5; --py:0.5;">
        <div class="Boi-Blush Boi-Blush_L"></div>
        <div class="Boi-Blush Boi-Blush_R"></div>
        <div class="Boi-Eye Boi-Eye_L"></div>
        <div class="Boi-Eye Boi-Eye_R"></div>
        <div class="Boi-Mouth"></div>
      </figure>
      <a class="Confirm-Body-Button Confirm-Body-Button_Cancel" href="javascript: void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >保留</a>
      <a class="Confirm-Body-Button Confirm-Body-Button_Delete" href="javascript: void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >卸载</a>
    </div>
  </section>
  <script src="js/confirm.js"></script>
</body>
</html>

以下是页面引入的CSS

* {
  box-sizing: border-box;
  font: inherit;
}

html {
  color: #333;
  font-size: 62.5%;
}

@media screen and (max-width: 480px) {
  html {
    font-size: 50%;
  }
}

html body {
  font-size: 2rem;
  padding: 0;
  margin: 0;
  width: 100vw;
  height: 100vh;
  background-image: linear-gradient(to left bottom, #444, #222);
  font-family: 'Rubik', sans-serif;
}

.Confirm {
  position: absolute;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 72rem;
  max-width: 100%;
  min-width: 34rem;
  max-height: 100%;
  height: 46rem;
  background-color: #ccc;
  border-radius: 1rem;
  box-shadow: 0px 10px 5px -3px rgba(0, 0, 0, 0.2);
}

.Confirm-Header {
  display: flex;
  align-items: center;
  position: relative;
  flex: 0 0 4rem;
  margin: 0 1rem;
  border-bottom: solid 1px rgba(0, 0, 0, 0.1);
  white-space: nowrap;
}

.Confirm-Header-Button {
  display: block;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 1rem;
  flex: 0 0 auto;
  transition: background-color 0.3s;
}

.Confirm-Header-Button:not(:last-of-type) {
  margin-right: 1rem;
}

.Confirm-Header-Button_Close {
  background-color: #a43;
}

.Confirm-Header-Button_Close:hover {
  background-color: #c85a48;
}

.Confirm-Header-Button_Maximize {
  background-color: #cb3;
}

.Confirm-Header-Button_Maximize:hover {
  background-color: #d6c95c;
}

.Confirm-Header-Button_Minimize {
  background-color: #6a4;
}

.Confirm-Header-Button_Minimize:hover {
  background-color: #81c061;
}

.Confirm-Header-Title {
  margin: 0;
  padding: 0;
  transform: translateX(50%);
  margin-right: 50%;
  margin-left: auto;
}

.Confirm-Body {
  flex: 1;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  position: relative;
  margin: 2rem 4rem;
}

.Confirm-Body-Title {
  margin: 0;
  padding: 0;
  position: absolute;
  transform: translateY(-50%);
  top: 5%;
  text-align: center;
  width: 100%;
}

.Confirm-Body-Button,
.Confirm-Body-Button:link,
.Confirm-Body-Button:visited {
  color: #fff;
  border-radius: 1rem;
  text-decoration: none;
  padding: 1rem 2rem;
  margin-bottom: 1rem;
  min-width: 10rem;
  text-align: center;
  transition: background-color 0.3s;
}

.Confirm-Body-Button_Delete {
  background-color: #a43;
}

.Confirm-Body-Button_Delete:hover {
  background-color: #c85a48;
}

.Confirm-Body-Button_Cancel {
  background-color: #6a4;
}

.Confirm-Body-Button_Cancel:hover {
  background-color: #81c061;
}

.Boi {
  --happiness: 0.9;
  --derp: 1;
  --px: 0.5;
  --py: 0.5;
  width: 22rem;
  max-width: 100%;
  height: 22rem;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-image: radial-gradient(#f7e0b2, #eb5);
  border-radius: 100%;
  overflow: hidden;
  margin: 0;
  align-self: center;
  flex: 0 0 auto;
  border: solid 2px #ecb23e;
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
}

.Boi,
.Boi * {
  position: absolute;
}

.Boi::before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-image: linear-gradient(to bottom, #5a8, rgba(85, 170, 136, 0));
  opacity: calc(1 - var(--happiness));
}

.Boi-Blush {
  width: 20%;
  height: 10%;
  background-color: rgba(255, 100, 100, 0.3);
  border: 3px solid rgba(255, 100, 100, 0.3);
  top: calc(45% + var(--py) * 10%);
  border-radius: 100%;
  opacity: calc(var(--happiness) * var(--happiness) * 0.9 + 0.1);
}

.Boi-Blush_L {
  left: calc(7% + var(--px) * 2%);
}

.Boi-Blush_R {
  right: calc(9% - var(--px) * 2%);
}

.Boi-Eye {
  width: calc(26% - var(--happiness) * 2%);
  height: calc(26% - var(--happiness) * 2%);
  background-color: #f6f6f6;
  border-radius: 100%;
  top: calc(25% + var(--py) * 10%);
  overflow: hidden;
}

.Boi-Eye_L {
  left: calc(18% + var(--px) * 4%);
}

.Boi-Eye_L::after {
  transform: translate(calc((var(--px) + var(--derp) * 0.5) * 100%), calc((var(--py) + var(--derp) * 0.5) * 100%));
}

.Boi-Eye_R {
  right: calc(22% - var(--px) * 4%);
}

.Boi-Eye_R::after {
  transform: translate(calc((var(--px) + var(--derp) * -0.3) * 100%), calc((var(--py) + var(--derp) * -0.3) * 100%));
}

.Boi-Eye::after {
  content: '';
  display: block;
  background-color: #421;
  width: calc(55% - var(--happiness) * 10%);
  height: calc(55% - var(--happiness) * 10%);
  border-radius: 100%;
}

.Boi-Mouth {
  width: calc(51% - var(--happiness) * 2%);
  height: calc(26% - var(--happiness) * 2%);
  background-color: #a33;
  border-radius: calc((1 - var(--happiness)) * 10em) calc((1 - var(--happiness)) * 10em) calc(var(--happiness) * 16em) calc(var(--happiness) * 16em);
  top: calc(57.5% + var(--py) * 5%);
  left: calc(47.5% + var(--px) * 5%);
  transform: translateX(-50%);
  overflow: hidden;
  border: 3px solid #962d2d;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}

.Boi-Mouth::before {
  content: '';
  display: block;
  position: absolute;
  width: 20%;
  height: 20%;
  top: 0;
  left: 50%;
  background-color: white;
  border-radius: 0 0 0.5rem 0.5rem;
}

.Boi-Mouth::after {
  content: '';
  display: block;
  position: absolute;
  width: 60%;
  height: 50%;
  left: 10%;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 20rem 20rem 0 0;
}

以下是页面引入的JS

const confirm = document.querySelector('.Confirm');
const boi = document.querySelector('.Boi');
const btnDelete = document.querySelector('.Confirm-Body-Button_Delete');
const btnCancel = document.querySelector('.Confirm-Body-Button_Cancel');
const current = {
  happiness: 0.9,
  derp: 1,
  px: 0.5,
  py: 0.5
};
const target = { ...current };

confirm.addEventListener('mousemove', onMouseMove);
confirm.addEventListener('mouseleave', onMouseLeave);

function onMouseMove({ clientX: x, clientY: y }) {
  let dx1 = x - btnDelete.getBoundingClientRect().x - btnDelete.getBoundingClientRect().width * 0.5;
  let dy1 = y - btnDelete.getBoundingClientRect().y - btnDelete.getBoundingClientRect().height * 0.5;
  let dx2 = x - btnCancel.getBoundingClientRect().x - btnCancel.getBoundingClientRect().width * 0.5;
  let dy2 = y - btnCancel.getBoundingClientRect().y - btnCancel.getBoundingClientRect().height * 0.5;
  let px = (x - confirm.getBoundingClientRect().x) / confirm.getBoundingClientRect().width;
  let py = (y - confirm.getBoundingClientRect().y) / confirm.getBoundingClientRect().height;
  let distDelete = Math.sqrt(dx1 * dx1 + dy1 * dy1);
  let distCancel = Math.sqrt(dx2 * dx2 + dy2 * dy2);
  let happiness = Math.pow(distDelete / (distCancel + distDelete), 0.75);

  target.happiness = happiness;
  target.derp = 0;
  target.px = px;
  target.py = py;
}

function onMouseLeave() {
  target.happiness = 0.9;
  target.derp = 1;
  target.px = 0.5;
  target.py = 0.5;
}

function update() {
  for (let prop in target) {
    if (target[prop] === current[prop]) {
      continue;
    } else if (Math.abs(target[prop] - current[prop]) < 0.01) {
      current[prop] = target[prop];
    } else {
      current[prop] += (target[prop] - current[prop]) * 0.1;
    }
    boi.style.setProperty(`--${prop}`, current[prop]);
  }
  requestAnimationFrame(update);
}

update();

总结

以上所述是小编给大家介绍的原生JS与CSS实现软件卸载对话框功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

JavaScript弹出对话框的三种方式

学习过js的小伙伴会发现,我们在一些实例中用到了alert()方法.prompt()方法.prompt()方法,他们都是在屏幕上弹出一个对话框,并且在上面显示括号内的内容,使用这种方法使得页面的交互性更精彩,实际上我们经常会在进行网页浏览时简单这种类型的对话框,在用户与应用程序进行双向交流时,经常要用到对话框. javascript的三种对话框是通过调用window对象的三个方法alert(),confirm()和prompt()来获得,可以利用这些对话框来完成js的输入和输出,实现与用户能进行
js弹出框、对话框、提示框、弹窗实现方法总结(推荐)

一.JS的三种最常见的对话框 //====================== JS最常用三种弹出对话框 ======================== //弹出对话框并输出一段提示信息 function ale() { //弹出一个对话框 alert("提示信息!"); } //弹出一个询问框,有确定和取消按钮 function firm() { //利用对话框返回的值 (true 或者 false) if (confirm("你确定提交吗?")) { aler
JS实现弹出下载对话框及常见文件类型的下载

1.写在前面 JS要实现下载功能,一般都是这么几个过程:生成下载的URL,动态创建一个A标签,并将其href指向生成的URL,然后触发A标签的单击事件,这样就会弹出下载对话框,从而实现了一个下载的功能. 这里所说的下载,有时候也可以理解为保存.出于安全考虑,JS肯定无法直接调用FileAPI写文件到磁盘,但是却可以通过下载来变相实现保存功能. 2.几个备用知识点 2.1. JS触发单击事件既然是用A标签模拟,那么肯定要知道JS如何主动触发单击事件. 最简单的触发单击事件肯定是elem.clic
JS实现网页每隔3秒弹出一次对话框的方法

本文实例讲述了JS实现网页每隔3秒弹出一次对话框的方法.分享给大家供大家参考,具体如下: 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-3-sec-alert-dlg-codes/ 具体代码如下: <html> <head> <title>每隔3秒弹出对话框</title> </head> <body> 不要以为这是个空网页,一会就有东西弹出来~ <script lang
js提示框替代系统alert,自动关闭alert对话框的实现方法

自己写了个alert提示框.因为系统alert在苹果手机微信中,提示时,顶部会显示网站地址. 同时其他后续操作需要在js中继续填写.因此简单用div写了一个alert提示框,并自动关闭. 效果图 css样式 /*弹出消息对话框样式*/ .show_alert_box{ width:100%; height:100%; position:fixed; top:0px; left:0px; background-color:rgba(0,0,0,0.6); display:none; z-index
利用javascript打开模态对话框(示例代码)

1. 标准的方法复制代码代码如下: <script type="text/javascript"> function openWin(src, width, height, showScroll){ window.showModalDialog (src,"","location:No;status:No;help:No;dialogWidth:"+width+";dialogHeight:"+heig
BootStrap+Angularjs+NgDialog实现模式对话框

本篇文章主要介绍了"angularjs+bootstrap+ngDialog实现模式对话框",对于Javascript教程感兴趣的同学可以参考一下: 在完成一个后台管理系统时,需要用表显示注册用户的信息.但是用户地址太长了,不好显示.所以想做一个模式对话框,点击详细地址按钮时,弹出对话框,显示地址. 效果如下图: 通过查阅资料,选择使用ngDialog来实现,ngDialog是一个用于Angular.js应用的模式对话框和弹出窗口.ngDialog非常小(?2K),拥有简约的API,通
原生JS与CSS实现软件卸载对话框功能

今天给大家分享一个特别有意思的软件卸载对话框,鼠标在整个对话框里移动时,中间的人脸会作出不同的变化,当鼠标悬停到"保留"按钮上时,人脸的表情会变得开心,当鼠标悬停到"卸载"按钮上面时,人脸的表情会变得不开心. 实现效果如下: 实现代码如下,首先是HTML: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">
原生js更改css样式的两种方式

下面我给大家介绍的是原生js更改CSS样式的两种方式: 1. 通过在javascript代码中的node.style.cssText="css表达式1:css表达式2:css表达式3 "的方式直接更改CSS样式. 2. 先在CSS样式表中对特定的类如"active类"设置样式(这里的active类是假定的,暂时不存在),然后再在javascript代码中通过node.classname="active"使得CSS样式表中对active类的样式设
原生JS实现的自动轮播图功能详解

本文实例讲述了原生JS实现的自动轮播图功能.分享给大家供大家参考,具体如下: 轮播图的用处轮播图是现在网站网页上最常见的效果之一,很多网站上都会用到,淘宝京东等等.有些自动选项卡也是需要用到的,而且它的可重复性高.在这里分享一下,用js原生代码,实现轮播图的常见效果! 轮播图的原理一系列的大小相等的图片平铺,利用CSS布局只显示一张图片,其余隐藏.通过定时器实现自动播放. Html布局首先父容器banner存放所有内容,子容器img-list存放图片.子容器list存放按钮小圆点.圆点我使
原生JS实现的简单轮播图功能【适合新手】

本文实例讲述了原生JS实现的简单轮播图功能.分享给大家供大家参考,具体如下: 经过几天的努力,终于攻克了这一难题,于是迫不及待的想要分享给大家,编写之前,我也看了不少其他博主的博客,大多是用偏移量写的,对新手来说,还是有些难以理解,虽然可能实现的需求不一样,但我想先从简入手,所以自己查阅资料,修改bug,终于完成.话不多说,上代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q
vuejs2.0运用原生js实现简单的拖拽元素功能示例

整理文档,搜刮出一个vuejs2.0运用原生js实现简单的拖拽元素功能示例,留作笔记. <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/> <meta
用原生JS实现简单的多选框功能

废话不多说了,直接给大家贴代码了,具体代码如下所示: <!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> </head> <body> <input id="cheakAll" type="checkbox">全选 <div> <
使用原生js编写一个简单的框选功能方法

今天我们来聊一下怎么使用原生javascript编写一个简单的框选功能. 需求描述鼠标左键按下不放,移动鼠标出现矩形选框: 鼠标左键松开,根据上边出现的矩形选框统计选框范围内的DOM元素: 嗯...上边的功能描述看着是挺简单的,但实现起来也还是会有些地方需要斟酌思考的.比如,如果我们的框选范围不是document.body,而是某一个div里边进行框选呢?而现实开发过程中,我们会遇上的应该就是第二种情况. 点击查看完整的源码怎么实现二话不说,咱们动手写代码吧!因为更好的兼容性,这里就避免了
原生js和css实现图片轮播效果

本文实例为大家分享了javascript图片轮播效果的具体代码,供大家参考,具体内容如下 <!DOCTYPE HTML> <html lang="zh-CN"> <head> <meta charset="utf-8"> <title>图片轮播</title> <style> #box { width:506px; height:306px; margin: 20px auto; b
原生js实现新闻列表展开/收起全文功能

知识要点 1.实现原理很简单,通过点击a标签设置div的display属性隐藏或者显示, 主要是对dom操作的掌握. 2.需要用到的dom操作: parentNode 获取父级元素 nextSibling获取下一个紧跟的节点 previousSibling获取上一个紧跟的节点 3.注意事项: 要考虑到当点击展开全文的时候,其他已经展开的全文要收起来. 当用nextSibling获取下一个节点时候,不同浏览器的判断是不一样的有的是获取元素,有的获取换行符或者空格,所以这里就要用到nodeType
原生JS实现首页进度加载动画

js进度加载动画程序是本人的个人作品,写的不好,可以参考,但未经本人允许,请不要用于其它用途! 早上写了个首页进度加载动画,本想在我的博客里用上,测试发现博客园加载太快,根本看不到动画效果,直接就加载'Complete'了,算了,还是不要把博客搞得太臃肿了! 于是我就写了个演示页面,在body里加了个iframe来加载大一点的网站,这样就看出效果了! 用Safari打开貌似CSS动画的播放时间变成同步了,不知道什么原因,本地测试又没问题(请大神指点!),用Chrome.Firefox倒是没问题,

原生JS与CSS实现软件卸载对话框功能

相关推荐

随机推荐