zoukankan      html  css  js  c++  java
  • 手电筒效果

    <!DOCTYPE html>
    <html>

    <head>
      <meta charset=utf-8>
      <meta name="viewport" content="width=device-width,initial-scale=1.0">
      <title>发送短信</title>
      <style>
        * {
          margin: 0;
          padding: 0;
        }
        .aa{
          300px;
          height:300px;
          position: relative; 
          overflow: hidden;
        }
        #e{
          300px;
          height:300px;
        }
        .mask{
          800px;
          height:800px;
          position: absolute;
          left:-250px;
          top:-250px;
          background: url("./tou.png") no-repeat center;
          background-size: contain;
        }
        </style>
      </head>
      <body>
          <div class="aa" id="main">
            <img src="14.jpg" id="e" alt="">
            <div class="mask" id="mask"></div>
          </div>
    </body>
    <script>
    var mask=document.querySelector("#mask");
    var main=document.querySelector("#main");
    main.onmousemove=function(e){
      console.log(e)

      var offsetX=e.clientX;
      var offsetY=e.clientY;
      var x=offsetX-400
      var y=offsetY-400

    console.log(x,y)
    mask.style.left=x+"px"
    mask.style.top=y+"px"
    }


    </script>
    </html>
  • 相关阅读:
    「疫期集训day11」沙漠
    「树形DP」洛谷P2607 [ZJOI2008]骑士
    「疫期集训day10」玫瑰
    「疫期集训day9」七月
    核心容器(概念)
    初识Spring
    IOC(控制反转思想)原型理论推导
    图片在上,文字在下并且等间距的三个菜单按钮
    编写登陆接口
    001使用gltf创建3d模型
  • 原文地址:https://www.cnblogs.com/liuhao-web/p/11289735.html
Copyright © 2011-2022 走看看