Dalam kode di bawah ini saya menggunakan clip path dan mouse untuk membuat efek senter dengan mouse Anda dan Anda dapat menggunakannya untuk melihat-lihat gambar dan ini berfungsi dengan baik. Namun saya bertanya-tanya bagaimana cara ...

0
conor177 5 April 2021, 21:55

1 menjawab

Jawaban Terbaik

Coba kode ini:

<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>

Pada dasarnya ini menyimpan status daftar flash (hidup/mati) dalam sebuah variabel. Saat aktif, peristiwa yang membuat efek lampu kilat tidak menghasilkan apa-apa (pernyataan if flashLightOn).

Saat Anda mengklik tombol, nilai flashLightOn disetel ke false, dan gaya "obor" diatur ulang ke default untuk menonaktifkan efek cahaya.

0
Timothé Malahieude 5 April 2021, 19:12