Ändern der Bildopazität mit JS oder CSS unter Mauszeiger?

Ich würde gerne ein Bild auf der Webseite haben, die beim Mouse Hover transparent wird, aber nur in einem Bereich, der dem Mauszeiger am nächsten ist, transparent ist und diesen Bereich mit dem Zeiger bewegt.Ändern der Bildopazität mit JS oder CSS unter Mauszeiger?

Einfacher Opazität Übergang kann leicht mit CSS erreicht werden:

<style type="text/css"> 
     img.transparent { 
      opacity: 1; 
      -webkit-transition: opacity 1s; 
      -moz-transition: opacity 1s; 
      transition: opacity 1s; 
     } 
     img.transparent:hover { 
      opacity: 0; 
     } 
    </style> 
    <img class="transparent" src="1.jpg">

Das Bild auf der Maus schön verschwinden macht auf und heraus wieder auf Maus erscheint.

Aber was ich erreichen möchte, ist der gleiche Effekt nur für einen Bereich in der Nähe des Mauszeigers. Damit wäre immer ein transparenter Bereich unter dem Zeiger, während er sich über das Bild bewegt.

Gibt es eine Möglichkeit, dies mit CSS oder JS zu erreichen?

Vielen Dank!

Quelle

2014-12-19 Andrey Gusakov

Wie über einen benutzerdefinierten Cursor mit einem weißen Hintergrund und Schaltern auf, dass zu machen, wenn Sie auf das Bild, sind schweben? – philtune

Sie meinen see ** bis ** ein Element? Nicht mit CSS und ich denke der JS wäre auch ziemlich funky. –

Ist jQuery in einer Antwort oder reinem Javascript erlaubt? – Rimble

Als vals vorgeschlagen, verwenden möchten, ein Bewegen (beliebige) Maske. Das Folgende ist eine Demonstration einer rechteckigen Maske, obwohl sie sehr leicht modifiziert werden kann, um irgendeine Form zu sein, die Sie wünschen. Diese Version arbeitet mit den neuesten Versionen von Firefox und Chromium und ermöglicht komplexere Formen über SVG-Elemente.

Beachten Sie, dass dies sehr schlechter Code ist. Es muss geschrieben werden, wenn Sie es in einem Projekt verwenden möchten, aber die Idee ist da.

Demo: http://jsfiddle.net/WK_of_Angmar/f8oe7hcq/

<!DOCTYPE html> 
<html> 
    <head> 
     <script type="application/javascript"> 
      window.addEventListener("load", function() { 
       var img = document.getElementsByTagName("image")[0]; 
       var imgPos = img.getBoundingClientRect(); 
       var imgX = imgPos.left; 
       var imgY = imgPos.top; 
       var rect = document.getElementsByTagName("rect")[1]; 
       var rectHalfWidth = rect.getAttribute("width")/2; 
       var rectHalfHeight = rect.getAttribute("height")/2; 
       img.addEventListener("mousemove", function(e) { 
        rect.setAttribute("x", e.clientX - imgX - rectHalfWidth); 
        rect.setAttribute("y", e.clientY - imgY - rectHalfHeight); 
        }, false); 
      }, false); 
     </script> 
     <style> 
      svg { 
       width: 320px; 
       height: 166px; 
      } 
      body { 
       background-color: red; 
       background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/7/76/Mozilla_Firefox_logo_2013.svg/226px-Mozilla_Firefox_logo_2013.svg.png"); 
      } 
      image:hover { 
       mask: url("#cursorMask"); 
      } 
     </style> 
    </head> 
    <body> 
     <svg> 
      <defs> 
       <mask id="cursorMask" maskUnits="objectBoundingBox" maskContentUtils="objectBoundingBox"> 
        <g> 
        <!-- the SECOND rect element is what determines the transparent area --> 
        <rect x="0" y="0" width="320" height="166" fill="#FFFFFF" /> 
        <rect x="0" y="0" width="100" height="100" fill="#000000" /> 
        </g> 
       </mask> 
      </defs> 
     <image width="320" height="166" xlink:href="https://upload.wikimedia.org/wikipedia/commons/d/d4/Firefox-33-xfce.png" /> 
     </svg> 
    </body> 
</html>

Quelle

2014-12-19 21:17:31

Sie haben Recht, CSS-Masken zu SVG-Masken ändern Sie erhalten Firefox-Kompatibilität – vals

Großartig! Vielen Dank! Ich vermutete, dass es eine Maske von irgendeiner Art geben sollte, aber nicht der heutigen Technologien bewusst war und es nicht googeln konnte. –

Was ich mir vorgestellt habe, war eine Art verwaschenes Ansichtsfenster in die darunter liegende Ebene. Es ist leicht erreichbar von Ihrem Code: http://jsfiddle.net/j6fv5Lk9/35/ –

Sie können dies mit Maskierung erhalten. Es hat eine begrenzte Unterstützung, sondern bietet genau das, was Sie

Die erforderliche CSS

#test { 
    top: 0px; 
    left: 0px; 
    -webkit-mask-position: -20px -20px; 
    -webkit-mask-size: 200px 400px; 
    -webkit-mask-image: radial-gradient(circle, rgba(0, 0, 0, 0) 32px, rgba(0, 0, 0, 1) 38px); 
    background-color: white; 
    border: solid 1px red; 
    width: 200px; 
    height: 200px; 
    background-image: url('http://placekitten.com/g/200/300'); 
} 

body { 
    background: repeating-linear-gradient(45deg, lightgreen 0px, white 50px); 
}

und einige Scripting, um es

document.getElementById("test").addEventListener('mousemove', mouseMove, false); 

function mouseMove (event) 
{ 
    var ele = document.getElementById ('test'); 

    ele.style.webkitMaskPositionX = event.offsetX - 100 + "px"; 
    ele.style.webkitMaskPositionY = event.offsetY + 200 + "px"; 
}

demo - only webkit

Quelle

2014-12-19 20:00:56 vals

Diese Lösung scheint die Maske um die Kanten zu wickeln, als ich sie auf der neuesten Version von Chromium getestet habe, was ich mir als unerwünschtes Verhalten vorstellen würde. http://webmup.com/tTn8y/vid.webm –

Ändern der Bildopazität mit JS oder CSS unter Mauszeiger?

Antwort

Verwandte Themen