我的蛙鏡 你別走阿~~~~~~~~~~~~~~

故事是這樣的兒 ~~~ :bowtie:

高度近視的我

拿下眼鏡 換上度數超淺的蛙鏡 看到的世界總是充滿想想空間

BUT!

蛙鏡度數淺雖淺 在水中化身成水中蛟龍時

還是可以看到許多美好的事物

自從禮拜四 蛙鏡壞掉 換了 沒度數的蛙鏡後

我游泳的小確性&福利 都沒惹~~~~~

昨天游泳的時候 心中握緊拳頭

為了增進我的泳技 我一定要買一副 有度數的眼鏡!!!!!!

就這樣 在水中 除了 泳鏡的發願! 還有 賽PROJECT 在腦海中~~~~~ 哈哈哈哈哈!!!

模糊的照片 戴上眼睛 就可以看到 美好的事物~~~~~~

傳說中 司法之女乃!

怎麼寫的

html, css

• css

.pic {
    text-align: center;
    position: relative;
    height: 80vh;
    width: 60wh;
}
.blur {
    height: 100%;
}
.overlay {
    position: inherit;
    top: 0px;
    left: 0px;
    height: 100%;
}
circle {
   opacity: 1;
   -webkit-transition: opacity 200ms linear;
   transition: opacity 200ms linear;
}

• html

<div class="overlay">
   <div class="pic">
     <svg class="blur" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%">
           <image filter="url(#filter2)" xlink:href="https://i.imgur.com/ZiJUoOY.png" width="100%" height="100%"></image>
           <filter id="filter2">
               <fegaussianblur stdDeviation="5" />
           </filter>
           <mask id="mask1">
               <circle cx="-50%" cy="-50%" r="30" fill="white" filter="url(#filter2)" />
           </mask>
           <image xlink:href="https://i.imgur.com/ZiJUoOY.png" width="100%" height="100%" mask="url(#mask1)"></image>
       </svg>
   </div>
</div>

javascript, jQuery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

const svgNS = "http://www.w3.org/2000/svg";

$(document).ready(function() {
//   let mask1 = $('#mask1 circle')[0];
//   let mask2 = $('#mask2 circle')[0];
  $('.pic').mousemove(function (event) {
    event.preventDefault();
    var upX = event.offsetX // event.clientX;
    var upY = event.offsetY // event.clientY;
    let mask = $('#mask1')[0];

    const circle = document.createElementNS(svgNS, "circle");
    circle.setAttribute("cx", upX)
    circle.setAttribute("cy", upY)    
    circle.setAttribute("r", "50")    
    circle.setAttribute("fill", "white");
    circle.setAttribute("filter", "url(#filter2)");
    
    mask.appendChild(circle);
    
    setTimeout(function(){ 
        circle.style.opacity = '0';
        setTimeout(function(){ 
            mask.removeChild(circle);
        }, 300);
    }, 300);
  });

  $('.pic2').mousemove(function (event) {
    event.preventDefault();
    var upX = event.offsetX // event.clientX;
    var upY = event.offsetY // event.clientY;
    let mask2 = $('#mask2')[0];

    const circle = document.createElementNS(svgNS, "circle");
    circle.setAttribute("cx", upX)
    circle.setAttribute("cy", upY)    
    circle.setAttribute("r", "50")    
    circle.setAttribute("fill", "white");
    circle.setAttribute("filter", "url(#filter2_2)");
    
    mask2.appendChild(circle);
    
    setTimeout(function(){ 
        circle.style.opacity = '0';
        setTimeout(function(){ 
            mask2.removeChild(circle);
        }, 300);
    }, 300);
  });

  $('.pic3').mousemove(function (event) {
    event.preventDefault();
    var upX = event.offsetX // event.clientX;
    var upY = event.offsetY // event.clientY;
    let mask2 = $('#mask3')[0];

    const circle = document.createElementNS(svgNS, "circle");
    circle.setAttribute("cx", upX)
    circle.setAttribute("cy", upY)    
    circle.setAttribute("r", "50")    
    circle.setAttribute("fill", "white");
    circle.setAttribute("filter", "url(#filter3)");
    
    mask2.appendChild(circle);
    
    setTimeout(function(){ 
        circle.style.opacity = '0';
        setTimeout(function(){ 
            mask2.removeChild(circle);
        }, 300);
    }, 300);
  });
}); 

阿珍

>\\\<

參考資料

• Unblur part of an image where the mouse hovers over
• codepen: unblur image on mousehover
• w3school.com: SVG circle
• Get X, Y Coordinates of Mouse Within Box
• MDN: Document.createElementNS