Comment puis-je personnaliser jquery d'avoir une loupe lentille circulaire?

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

  •  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.

Était-ce utile?

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?

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top