Foros del Web » Programando para Internet » Jquery »

[APORTE] · Efecto Lupa

Estas en el tema de [APORTE] · Efecto Lupa en el foro de Jquery en Foros del Web. Hola gente, espero esten bien. He desarrollado este script para mi sitio web, me viene bien ya que muchas veces las imagenes al tener un ...
  #1 (permalink)  
Antiguo 31/01/2018, 01:24
 
Fecha de Ingreso: agosto-2015
Ubicación: Rosario - Argentina
Mensajes: 409
Antigüedad: 3 años, 4 meses
Puntos: 11
[APORTE] · Efecto Lupa

Hola gente, espero esten bien.

He desarrollado este script para mi sitio web, me viene bien ya que muchas veces las imagenes al tener un tamaño fijo estas no se ven en detalle.

Aqui dejo el code:
Código Javascript:
Ver original
  1. // #magnifying es el id de la lupa.
  2. var MagnifyingZoom = 2; // Nivel de Zoom.
  3. var ImageWidth, ImageHeight;
  4.  
  5. function ZoomImage(object){
  6.     ImageWidth = $(object).width();
  7.     ImageHeight = $(object).height();
  8.     $(object).on("mouseenter", function(){
  9.         var Image = $(object).css("background-image");
  10.         $("#magnifying").css({"background-image":Image});
  11.     });
  12.     $(object).on("mousemove", function(e){
  13.         var PositionX = e.pageX;
  14.         var PositionY = e.pageY;
  15.         var ContainerX = e.pageX - this.offsetLeft;
  16.         var ContainerY = e.pageY - this.offsetTop;
  17.         MagnifyingFollow(ContainerX, ContainerY);
  18.         CheckMagnifying(object, PositionX, PositionY, ContainerX, ContainerY);
  19.         SetZoom(ContainerX, ContainerY);
  20.     });
  21. }
  22.  
  23. function SetZoom(ContainerX, ContainerY){
  24.     var ImageX = $("#magnifying").width() / (2 * MagnifyingZoom);
  25.     var ImageY = $("#magnifying").height() / ( 2 * MagnifyingZoom);
  26.     $("#magnifying").css({
  27.         "background-position":"top -"+((ContainerY - ImageY) * MagnifyingZoom)+"px left -"+((ContainerX - ImageX) * MagnifyingZoom)+"px",
  28.         "background-size":(ImageWidth * MagnifyingZoom)+"px "+(ImageHeight * MagnifyingZoom)+"px",
  29.     });
  30. }
  31.  
  32. function MagnifyingFollow(PageX, PageY){
  33.     $("#magnifying").show();
  34.     $("#magnifying").css({
  35.         "left":(PageX-($("#magnifying").width()/2))+"px",
  36.         "top":(PageY-($("#magnifying").height()/2))+"px"
  37.     });
  38. }
  39.  
  40. function CheckMagnifying(object, CursorX, CursorY, ContainerX, ContainerY){
  41.     if(ContainerX <= 0 || ContainerY <= 0 || ContainerX > $(object).width() || ContainerY > $(object).height()){
  42.         $("#magnifying").hide();
  43.     }
  44. }
Solo llamamos a la funcion y listo.
Código Javascript:
Ver original
  1. ZoomImage('ContainerSelector');

CSS Lupa:
Código CSS:
Ver original
  1. #magnifying{
  2.     background-position:center center;
  3.     background-repeat:no-repeat;
  4.     background-color:rgba(255,255,255,1);
  5.     border:1px solid rgba(0,0,0,1);
  6.     box-shadow:0px 0px 1px rgba(255,255,255,1);
  7.     width:20vmin;
  8.     height:15vmin;
  9.     position:relative;
  10.     cursor:none;
  11.     display:none;
  12. }

Espero que les sea de utilidad tanto como ami.

Etiquetas: css, efecto, javascript, lupa
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 06:19.