Wie kann ich JQuery Loupe an eine kreisförmige Linse anpassen?

StackOverflow https://stackoverflow.com/questions/5856381

  •  27-10-2019
  •  | 
  •  

Frage

Ich würde mich über die Gedanken von JavaScript / CSS -Ninjas darüber freuen, wie ich anpassen kann:

https://github.com/jdbartlett/loupe/blob/master/jquery.loupe.js

Einen kreisförmigen Zoombereich anstelle eines rechteckigen Bereichs haben? Es gibt eine Option, um eine CSS -Klasse für die Loupe festzulegen.

Bitte beachten Sie, dass dies eine Frage zur oben verlinkten Bibliothek ist. Ich habe bereits nach anderen Bibliotheken gegoogelt. Ich möchte die JS so klein wie möglich halten.

War es hilfreich?

Lösung 2

Vom Entwickler von Loupe.js:

Vielleicht möchten Sie sich Chris Iufer's Loupe ansehen, das nur etwas größer ist als meine und einige Proben enthält, die CSS3 verwenden, um eine runde Lupe zu erreichen:

http://chrisifer.com/loupe/sample.html

Während Mine ein absolut positioniertes Bild innerhalb eines DIV verwendet, verwendet sein Hintergrundbild auf der Div- und Hintergrundposition, um das Bild zu bewegen, sodass CSS3 Border-Radius funktioniert.

Andere Tipps

Ich denke, der einfachste Weg, dies zu tun, ist die Verwendung von CSS3-Grenzradius, das von den modernen Versionen aller Webbrowser unterstützt wird (nein dh niedriger als Version 9).

Wenn Sie dies in Ihrem JavaScript haben

$('selector').loupe({
    width: 150, // width of magnifier
    height: 150, // height of magnifier
    loupe: 'loupe' // css class for magnifier
});

Setzen Sie dies einfach in Ihr CSS:

.loupe {
-webkit-border-radius: 150px;
-moz-border-radius: 150px;
border-radius: 150px;
}

... und alle alten Versionen von IE zeigen nur einen Quadrat, was in Ihrem Fall vielleicht in Ordnung ist?

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top