Wie kann ich JQuery Loupe an eine kreisförmige Linse anpassen?
-
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.
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?