Comment puis-je personnaliser jquery d'avoir une loupe lentille circulaire?
-
27-10-2019 - |
Question
J'apprécierait les pensées de tous les ninjas javascript / css sur la façon dont je peux personnaliser:
https://github.com/jdbartlett/loupe/blob/ maître / jquery.loupe.js
Pour avoir une zone de zoom circulaire au lieu d'un rectangle? Il y a une option pour définir une classe CSS pour la loupe.
S'il vous plaît noter que ceci est une question sur la bibliothèque liée ci-dessus. Je l'ai déjà googlé pour d'autres bibliothèques. Je veux garder les js aussi faible que possible.
La solution 2
Du développeur de loupe.js:
vous pouvez regarder la loupe de chris iufer, qui est seulement un peu plus que le mien et comprend quelques exemples qui utilisent CSS3 pour obtenir un tour loupe:
http://chrisiufer.com/loupe/sample.html
alors que le mien utilise une image tout à fait disposé à l'intérieur d'un div, son utilise background-image sur la position de fond div et pour déplacer le image, de sorte CSS3 œuvres border-radius.
Autres conseils
Je suppose que la meilleure façon de le faire est d'utiliser CSS3 border-radius, qui est pris en charge par les versions modernes de tous les navigateurs Web (pas IE inférieure à la version 9).
Si vous avez dans votre javascript
$('selector').loupe({
width: 150, // width of magnifier
height: 150, // height of magnifier
loupe: 'loupe' // css class for magnifier
});
Il suffit de mettre dans votre css:
.loupe {
-webkit-border-radius: 150px;
-moz-border-radius: 150px;
border-radius: 150px;
}
... et toutes les anciennes versions d'IE va juste montrer un carré, ce qui est peut-être OK dans votre cas?