Остановка эффекта фонарика по траектории клипа

Question 1

В этом коде ниже я использую путь обрезки и мышь, чтобы создать эффект фонарика с помощью мыши, и вы можете использовать его для осмотра изображения, и это отлично работает. Однако мне интересно, как ...

javascript html css

0

conor177 5 Апр 2021 в 21:55

Answer

Попробуйте этот код:

<html>
   <head>
      <style>        
         .image {
         width:600px;
         height:400px;
         border:5px solid black;
         cursor:none;
         }
         .image .torch {
         width:600px;
         height:400px;
         background:url("back.jpg") center no-repeat;
         background-size:cover;  
         clip-path:circle(30% at 0% 0%);
         }          
      </style>
      <script>
         var flashLightOn = false;
                
         function moveTorch(event){
             if (!flashLightOn) {
                 var torch = document.getElementsByClassName("torch")[0];
                 torch.style.clipPath = `circle(30% at ${event.offsetX}px ${event.offsetY}px)`;
             }
                                     }
         function turnOn(){
             flashLightOn = true;
             var torch = document.getElementsByClassName("torch")[0];
             torch.style.clipPath = "none";
         }
         
      </script>                
   </head>
   <body>
      <div class="image" onmousemove="moveTorch(event)">
         <div class="torch">
            <button onclick="turnOn();">Turn on Light</button>
            >
         </div>
      </div>
   </body>
</html>

В основном он сохраняет состояние списка вспышек (включено / выключено) в переменной. Когда он включен, событие, вызывающее эффект вспышки, ничего не делает (инструкция if flashLightOn).

Когда вы щелкаете по кнопке, значение flashLightOn устанавливается на false, а стиль «фонарика» сбрасывается на значение по умолчанию, чтобы отключить световой эффект.

0

Timothé Malahieude 5 Апр 2021 в 19:12

Question 2

Попробуйте этот код:

<html>
   <head>
      <style>        
         .image {
         width:600px;
         height:400px;
         border:5px solid black;
         cursor:none;
         }
         .image .torch {
         width:600px;
         height:400px;
         background:url("back.jpg") center no-repeat;
         background-size:cover;  
         clip-path:circle(30% at 0% 0%);
         }          
      </style>
      <script>
         var flashLightOn = false;
                
         function moveTorch(event){
             if (!flashLightOn) {
                 var torch = document.getElementsByClassName("torch")[0];
                 torch.style.clipPath = `circle(30% at ${event.offsetX}px ${event.offsetY}px)`;
             }
                                     }
         function turnOn(){
             flashLightOn = true;
             var torch = document.getElementsByClassName("torch")[0];
             torch.style.clipPath = "none";
         }
         
      </script>                
   </head>
   <body>
      <div class="image" onmousemove="moveTorch(event)">
         <div class="torch">
            <button onclick="turnOn();">Turn on Light</button>
            >
         </div>
      </div>
   </body>
</html>

В основном он сохраняет состояние списка вспышек (включено / выключено) в переменной. Когда он включен, событие, вызывающее эффект вспышки, ничего не делает (инструкция if flashLightOn).

Когда вы щелкаете по кнопке, значение flashLightOn устанавливается на false, а стиль «фонарика» сбрасывается на значение по умолчанию, чтобы отключить световой эффект.

0

Timothé Malahieude 5 Апр 2021 в 19:12

Остановка эффекта фонарика по траектории клипа

1 ответ

Похожие вопросы

Новые вопросы

javascript