2021-09-09

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport"
    content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
  <meta name="renderer" content="webkit" />
  <meta name="force-rendering" content="webkit" />
  <meta http-equiv="Cache-Control" content="no-siteapp" />
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
  <title>测试</title>
  <link href="../images/favicon-16x16.png" rel="icon" type="image/png" sizes="16x16" />
  <link href="../images/favicon-48x48.png" rel="icon" type="image/png" sizes="48x48" />
  <link rel="stylesheet" href="./css/typo.css" />
  <style>
    .content {
      position: relative;
      width: 800px;
      height: 800px;
      margin: 70px auto;
      border: 1px solid #f00;
    }
    .x1 {
      position: absolute;
      left: 50%;
      top: 50%;
      width: 150px;
      height: 150px;
      line-height: 150px;
      border-radius: 50%;
      background-color: #f00;
      color: #fff;
      transform: translate(-50%, -50%);
      text-align: center;
    }
  </style>
</head>
<body>
  <div id="info"></div>
  <div class="content" id="content">
    <div class="x1" id="x1">(400, 400)</div>
  </div>
  <script type="text/javascript" src="./js/jquery.min.js"></script>
  <script type="text/javascript" src="./js/lodash.min.js"></script>
  <script>
    (function ($, undefined) {
      const $x1 = $('#x1');
      const $content = $('#content');
      const $info = $('#info');
      $content.on('mousemove', function (e) {
        if (e.target.id === $content.attr('id')) {
          const { offsetX, offsetY } = e;
          const x = offsetX - 400;
          const y = offsetY - 400;
          const xie = Math.round(Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2)))
          $x1.css({
            "box-shadow": `${x / 24}px ${y / 24}px 15px rgba(125, 125, 125, 0.3)`,
          })
          $info.text(`(${x}, ${y}) -> ${xie}`)
        }
      })
    })(jQuery);
  </script>
</body>
</html>

效果
根据鼠标位置 ,生成的阴影

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 第七章 “好习惯养成”和“财务自由”的实践 通过前文的阐述,我们知道了通过学习提高认知,使用系统优化升级的科学方法...
    嘟嘟宝阅读 526评论 0 0
  • 第二十章孤岛训练之远程狙杀 黑夜给了D18最好的掩护,在这片森林里,他觉得自己如鱼得水样,在五十米距离范围,无情的...
    长沙的欧阳阅读 388评论 0 0
  • 攻克耳鸣耳聋,方法竟然这么简单? 耳鸣分为内因和外因。内因分为实证和虚证,实证主要为肝火上扰和痰火郁结,肝火上扰的...
    耳鸣小贴士88阅读 161评论 0 0
  • 碧兰村位于希斯帝国的东南部地区,是个算不上很大的小村落,村口的小河是希斯帝国最大的河流怒坎尔河的支流。由于不错的水...
    陈睿智阅读 375评论 0 0
  • 最近,抖音上又出现哪些热卖新趋势呢?通过平时刷抖音分析,我们发现近期抖音整体电商市场势头强劲。 除此以外,抖音也在...
    V991108238阅读 209评论 0 0