首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Posted in Javascript onDecember 05, 2019

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

实现效果如下：

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

实现代码如下，首先是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实现软件卸载对话框功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

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

- Author -

aiguangyuan

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
javascript下操作css的float属性的特殊写法
Aug 22 Javascript
jQuery中removeClass()方法用法实例
Jan 05 Javascript
JQuery中clone方法复制节点
May 18 Javascript
使用BootStrap建立响应式网页——通栏轮播图（carousel）
Dec 21 Javascript
Node.js使用NodeMailer发送邮件实例代码
Mar 06 Javascript
ionic+AngularJs实现获取验证码倒计时按钮
Apr 22 Javascript
使用JS实现图片轮播的实例(前后首尾相接)
Sep 21 Javascript
详解vue中点击空白处隐藏div的实现（用指令实现）
Apr 19 Javascript
AngularJS模态框模板ngDialog的使用详解
May 11 Javascript
浅谈VUE中演示v-for为什么要加key
Jan 16 Javascript
深入解读VUE中的异步渲染的实现
Jun 19 Javascript
React Fragment介绍与使用详解
Nov 11 Javascript
Vue快速实现通用表单验证功能
Dec 05 #Javascript
Vue组件通信中非父子组件传值知识点总结
Dec 05 #Javascript
基于javascript实现贪吃蛇经典小游戏
Apr 10 #Javascript
微信小程序登录时如何获取input框中的内容
Dec 04 #Javascript
微信小程序日历插件代码实例
Dec 04 #Javascript
微信小程序request请求封装，验签代码实例
Dec 04 #Javascript
vue中使用极验验证码的方法（附demo）
Dec 04 #Javascript
XML(1) list(1) 数据类型(8) find(1) 自动化(1) Bean(3) zip(1) IOC(3) enumerate(1) metaclass(1)
You might like
关于我转生变成史莱姆这档事：第二季PV上线，萌王2021年回归
2020/05/06 日漫
用PHP读注册表
2006/10/09 PHP
修改了一个很不错的php验证码(支持中文)
2007/02/14 PHP
PHP 魔术变量和魔术函数详解
2015/02/25 PHP
ThinkPHP里用U方法调用js文件实例
2015/06/18 PHP
firefox firebug中文入门教程 脚本之家新年特别版
2010/01/02 Javascript
javascript+mapbar实现地图定位
2010/04/09 Javascript
JavaScript性能优化 创建文档碎片(document.createDocumentFragment)
2010/07/13 Javascript
JavaScript 的继承
2011/10/01 Javascript
关于jQuery UI 使用心得及技巧
2012/10/10 Javascript
js模拟点击以提交表单为例兼容主流浏览器
2013/11/29 Javascript
推荐5 个常用的JavaScript调试技巧
2015/01/08 Javascript
jQuery过滤选择器详解
2015/01/13 Javascript
jquery实现最简单的滑动菜单效果代码
2015/09/12 Javascript
jQuery插件ImageDrawer.js实现动态绘制图片动画（附源码下载）
2016/02/25 Javascript
原生js仿jquery animate动画效果
2016/07/13 Javascript
Javascript 实现全屏滚动实例代码
2016/12/31 Javascript
Bootstrap模态窗口源码解析
2017/02/08 Javascript
Bootstrap显示与隐藏简单实现代码
2017/03/06 Javascript
JavaScript正则表达式函数总结（常用）
2018/02/22 Javascript
vue2.0项目实现路由跳转的方法详解
2018/06/21 Javascript
Vue2实时监听表单变化的示例讲解
2018/08/30 Javascript
npm 语义版本控制详解
2019/09/10 Javascript
Vue.js watch监视属性知识点总结
2019/11/11 Javascript
用js限制网页只在微信浏览器中打开(或者只能手机端访问)
2020/12/24 Javascript
浅谈在vue-cli3项目中解决动态引入图片img404的问题
2020/08/04 Javascript
Python实现excel转sqlite的方法
2017/07/17 Python
Python编程argparse入门浅析
2018/02/07 Python
python实现决策树ID3算法的示例代码
2018/05/30 Python
Python读取excel指定列生成指定sql脚本的方法
2018/11/28 Python
python交换两个变量的值方法
2019/01/12 Python
Dockers鞋官网：Dockers Shoes
2018/11/13 全球购物
初三家长会邀请函
2014/01/18 职场文书
个人总结与自我评价
2014/09/18 职场文书
公务员处分决定书
2015/06/25 职场文书
Python+Tkinter打造签名设计工具
2022/04/01 Python