JS+CSS实现狙击镜视觉效果

最新推荐文章于 2023-10-30 23:13:25 发布

Z2HT

最新推荐文章于 2023-10-30 23:13:25 发布

阅读量666

点赞数

本文链接：https://blog.csdn.net/m0_58362205/article/details/122232854

版权

这篇博客通过JavaScript和CSS实现了动态的狙击镜效果。当鼠标在页面上移动时，根据鼠标的方位，动态调整元素的阴影和线条位置，模拟瞄准镜的视觉变化。文章中利用了节流函数优化鼠标移动事件，提高性能，并通过键盘控制元素位置，增加了互动性。

摘要由CSDN通过智能技术生成

主要的思路是判断鼠标移动的方向改变box-shadow的属性值,鼠标移动事件采用了节流函数防止不必要的性能浪费。

鼠标未经过时模糊：

鼠标经过：

鼠标各方向移动：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>狙击镜</title>
  <style>
    #pos{
      filter: blur(1px);
      backdrop-filter: blur(6px);
      position: relative;
      top: 0px;
      left: 0px;
      display: flex;
      height: 400px;
      width: 400px;
      background-color: rgba(248, 205, 126,0.6);
      justify-content: center;
      align-items: center;
      border-radius: 50%;
      border: 5px solid rgba(0, 0, 0,0.7);
      box-shadow: 0px 0px 15px rgb(0, 0, 0),0px 0px 15px 8px rgb(0, 0, 0) inset;
      transition:0.3s ease-out;
    }
    #pos:hover{
      backdrop-filter: none;
      filter:none;
      box-shadow: 0px 0px 15px 5px rgb(0, 0, 0) inset;
    }
    #chlid{
      display: flex;
      justify-content: center;
      align-items: center;
    }
    #pos:hover #aim1{
      box-shadow: none;
    }
    #pos:hover #aim2{
      box-shadow: none;
    }
    /* 纵轴 */
    #aim1{
      position: absolute;
      margin-left: 0;
      background-color: rgba(0, 0, 0,0.7);
      box-shadow: 0px 0px 8px 2px #000;
      width: 1px;
      height: 100%;
      transition:0.3s ease-out;
    }
    /* 横轴 */
    #aim2{
      position: absolute;
      margin-top: 0;
      background-color: rgba(0, 0, 0,0.8);
      box-shadow: 0px 0px 8px 2px #000;
      width: 100%;
      height: 1px;
      transition:0.3s ease-out;
    }
  </style>
</head>
<body onkeydown="keyd(event)">
  <div id="pos">
    <div id="chlid">
      <div id="aim1"></div>
      <div id="aim2"></div>
    </div>
  </div>
  <script>
      var arr=document.getElementsByTagName('div')
      var pos=document.getElementById('pos')
      var aim1=document.getElementById('aim1')
      var aim2=document.getElementById('aim2')
      var chlid=document.getElementById('chlid')
      var dwint=10
      var lfint=0
      function keyd(event){        
        if(event.key==='ArrowDown'){
          pos.style.top=(dwint+=50)+"px"
        }else if(event.key==='ArrowUp'){
          pos.style.top=(dwint-=50)+"px"
        }else if(event.key==='ArrowLeft'){
          pos.style.left=(lfint-=50)+"px"
        }else{
          pos.style.left=(lfint+=50)+"px"
        }
      }
      var t = null;
      var Xindex;
      var Yindey;
      document.onmousemove = function (event){
        if(t) return;
        t = setTimeout(() => {
          if(Math.abs(Xindex-(event.clientX-205))<20&&Math.abs(Yindey-(event.clientY-205))<20){//坐标改变小
            pos.style.boxShadow='0px 0px 15px 5px rgb(0, 0, 0) inset'
            aim1.style.marginLeft='0px'
            aim2.style.marginTop='0px'
          }else if(Xindex>event.clientX-205&&Math.abs(Yindey-(event.clientY-205))<10){//向左
            pos.style.boxShadow='30px 0px 15px 8px rgb(0, 0, 0) inset'
            aim1.style.marginLeft='50px'
          }else if(Yindey>event.clientY-205&&Math.abs(Xindex-(event.clientX-205))<10){//向上
            pos.style.boxShadow='0px 30px 15px 8px rgb(0, 0, 0) inset'
            aim2.style.marginTop='50px'
          }else if(Xindex<event.clientX-205&&Math.abs(Yindey-(event.clientY-205))<10){向右
            pos.style.boxShadow='-30px 0px 15px 8px rgb(0, 0, 0) inset'
            aim1.style.marginLeft='-50px'
          }else if(Yindey<event.clientY-205&&Math.abs(Xindex-(event.clientX-205))<10){//向下
            pos.style.boxShadow='0px -30px 15px 8px rgb(0, 0, 0) inset'
            aim2.style.marginTop='-50px'
          }else if(Xindex>event.clientX-205&&Yindey>event.clientY-205){//左上
            pos.style.boxShadow='30px 30px 15px 8px rgb(0, 0, 0) inset'
            aim1.style.marginLeft='50px'
            aim2.style.marginTop='50px'
          }else if(Xindex<event.clientX-205&&Yindey>event.clientY-205){//右上
            pos.style.boxShadow='-30px 30px 15px 8px rgb(0, 0, 0) inset'
            aim1.style.marginLeft='-50px'
            aim2.style.marginTop='50px'
          }else if(Xindex<event.clientX-205&&Yindey<event.clientY-205){//右下
            pos.style.boxShadow='-30px -30px 15px 8px rgb(0, 0, 0) inset'
            aim1.style.marginLeft='-50px'
            aim2.style.marginTop='-50px'
          }else{//左下
            pos.style.boxShadow='30px -30px 15px 8px rgb(0, 0, 0) inset'
            aim1.style.marginLeft='50px'
            aim2.style.marginTop='-50px'
          }
          pos.style.top=(event.clientY-205)+'px'
          Yindey=event.clientY-205
          dwint=event.clientY-205
          pos.style.left=(event.clientX-205)+'px'
          Xindex=event.clientX-205
          lfint=event.clientX-205
          t = null;
        }, 80);
      }
  </script>
</body>
</html>