首页
所有分类
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 相关文章推荐
jquery和javascript的区别(常用方法比较)
Jul 04 Javascript
JavaScript和JQuery的鼠标mouse事件冒泡处理
Jun 19 Javascript
JS获取鼠标坐标位置实例分析
Jan 20 Javascript
对象转换为原始值的实现方法
Jun 06 Javascript
jQuery删除节点用法示例(remove方法)
Sep 08 Javascript
浅析javascript中的Event事件
Dec 09 Javascript
vue-cli+webpack记事本项目创建
Apr 01 Javascript
在vue 中使用 less的教程详解
Sep 26 Javascript
详解Vue2.0组件的继承与扩展
Nov 23 Javascript
JS异步处理的进化史深入讲解
Aug 25 Javascript
在vue中嵌入外部网站的实现
Nov 13 Javascript
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
Feb 23 Vue.js
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
OutputStream(1) vuex(1) Vue(10) axios(1) HashSet集合(1) Set接口(1) 高动态范围(1) Vue3(1) InputStream(1) persistedstate(1)
You might like
搜索和替换文件或目录的一个好类--很实用
2006/10/09 PHP
PHP+MySQL投票系统的设计和实现分享
2012/09/23 PHP
PHP 接入支付宝即时到账功能
2016/09/18 PHP
JS 日期验证正则附asp日期格式化函数
2009/09/11 Javascript
把jquery 的dialog和ztree结合实现步骤
2013/08/02 Javascript
jquery实现checkbox 全选/全不选的通用写法
2014/02/22 Javascript
jQuery实现列表自动滚动循环滚动展示新闻
2014/08/22 Javascript
vue.js入门教程之计算属性
2016/09/01 Javascript
微信小程序 下拉菜单的实现
2017/04/06 Javascript
JS脚本加载后执行相应回调函数的操作方法
2018/02/28 Javascript
Vue.js实现的计算器功能完整示例
2018/07/11 Javascript
微信小程序如何获取群聊的openGid以及名称详解
2019/07/17 Javascript
vue 自动化路由实现代码
2019/09/03 Javascript
js实现贪吃蛇小游戏
2019/10/29 Javascript
vue中watch和computed为什么能监听到数据的改变以及不同之处
2019/12/27 Javascript
Vue-router中hash模式与history模式的区别详解
2020/12/15 Vue.js
python脚本实现统计日志文件中的ip访问次数代码分享
2014/08/06 Python
详细解析Python中__init__()方法的高级应用
2015/05/11 Python
在Python的Django框架中显示对象子集的方法
2015/07/21 Python
Python判断文本中消息重复次数的方法
2016/04/27 Python
Python Selenium安装及环境配置的实现
2020/03/17 Python
AmazeUI 输入框组的示例代码
2020/08/14 HTML / CSS
System.Array.CopyTo()和System.Array.Clone()有什么区别
2016/06/20 面试题
英文版餐饮业求职信
2013/10/18 职场文书
求职信范文怎么写
2014/01/29 职场文书
同居协议书范本
2014/04/23 职场文书
离婚协议书怎么写（范本参考）
2014/09/30 职场文书
2014年办公室工作总结范文
2014/11/12 职场文书
写给导师的自荐信
2015/03/06 职场文书
婚宴致辞
2015/07/28 职场文书
nginx location中多个if里面proxy_pass的方法
2021/03/31 Servers
MongoDB使用场景总结
2022/02/24 MongoDB
python神经网络学习 使用Keras进行简单分类
2022/05/04 Python
vue使用element-ui按需引入
2022/05/20 Vue.js
Mybatis-plus配置分页插件返回统一结果集
2022/06/21 Java/Android
前端框架ECharts dataset对数据可视化的高级管理
2022/12/24 Javascript