#activar ~ .desplegable {display: none;overflow: hidden;} #activar:checked ~ .desplegable {display: block;} -->
Crea en línea una galería de imágenes gratuitamente
Menú vertical con movimiento
Efectos de los vínculos de nuestras entradas
Etiquetas en forma de menú desplegable
Sunshine Blogger Template
Entradas Populares de forma horizontal
 Swipy Blogger Template
El Cubo de Rubik
Crear columnas en nuestras entradas
Trucos Gmail
Gameliso Magazine Blogger Template
Editar imagen Photopea

iMAGEN LUPA

ddddd 
FFF


Image Magnifier Glass

Mouse over the image:

Feel free to change the strength of the magnifier glass when initiating the magnify function.




XXX
ver código








Image Magnifier Glass

Mouse over the image:

Feel free to change the strength of the magnifier glass when initiating the magnify function.

 
Texto del enlaceTexto del tooltip

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {box-sizing: border-box;}

.img-magnifier-container {
  position:relative;
}

.img-magnifier-glass {
  position: absolute;
  border: 3px solid #000;
  border-radius: 50%;
  cursor: none;
  /*Set the size of the magnifier glass:*/
  width: 100px;
  height: 100px;
}
</style>
<script>
function magnify(imgID, zoom) {
  var img, glass, w, h, bw;
  img = document.getElementById(imgID);
  /*create magnifier glass:*/
  glass = document.createElement("DIV");
  glass.setAttribute("class", "img-magnifier-glass");
  /*insert magnifier glass:*/
  img.parentElement.insertBefore(glass, img);
  /*set background properties for the magnifier glass:*/
  glass.style.backgroundImage = "url('" + img.src + "')";
  glass.style.backgroundRepeat = "no-repeat";
  glass.style.backgroundSize = (img.width * zoom) + "px " + (img.height * zoom) + "px";
  bw = 3;
  w = glass.offsetWidth / 2;
  h = glass.offsetHeight / 2;
  /*execute a function when someone moves the magnifier glass over the image:*/
  glass.addEventListener("mousemove", moveMagnifier);
  img.addEventListener("mousemove", moveMagnifier);
  /*and also for touch screens:*/
  glass.addEventListener("touchmove", moveMagnifier);
  img.addEventListener("touchmove", moveMagnifier);
  function moveMagnifier(e) {
    var pos, x, y;
    /*prevent any other actions that may occur when moving over the image*/
    e.preventDefault();
    /*get the cursor's x and y positions:*/
    pos = getCursorPos(e);
    x = pos.x;
    y = pos.y;
    /*prevent the magnifier glass from being positioned outside the image:*/
    if (x > img.width - (w / zoom)) {x = img.width - (w / zoom);}
    if (x < w / zoom) {x = w / zoom;}
    if (y > img.height - (h / zoom)) {y = img.height - (h / zoom);}
    if (y < h / zoom) {y = h / zoom;}
    /*set the position of the magnifier glass:*/
    glass.style.left = (x - w) + "px";
    glass.style.top = (y - h) + "px";
    /*display what the magnifier glass "sees":*/
    glass.style.backgroundPosition = "-" + ((x * zoom) - w + bw) + "px -" + ((y * zoom) - h + bw) + "px";
  }
  function getCursorPos(e) {
    var a, x = 0, y = 0;
    e = e || window.event;
    /*get the x and y positions of the image:*/
    a = img.getBoundingClientRect();
    /*calculate the cursor's x and y coordinates, relative to the image:*/
    x = e.pageX - a.left;
    y = e.pageY - a.top;
    /*consider any page scrolling:*/
    x = x - window.pageXOffset;
    y = y - window.pageYOffset;
    return {x : x, y : y};
  }
}
</script>
</head>
<body>

<h1>Image Magnifier Glass</h1>

<p>Mouse over the image:</p>

<div class="img-magnifier-container">
  <img id="myimage" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifpZA8BsG2RMPHhxVI_RtRk6gffNTBhOTsRK6UltQsVYRlESyDK5RGOoUShl4l5US8czF6CRdZcqSFcIv5xBR6Xlh25HiUp-B8laJ5_DIXeJrzhwA1KG9pEuXgVVn8e6oFpiRADm26k9JD/s600/logo+mil-1.png" width="600" height="400">
</div>

<p>Feel free to change the strength of the magnifier glass when initiating the magnify function.</p>

<script>
/* Initiate Magnify Function
with the id of the image, and the strength of the magnifier glass:*/
magnify("myimage", 3);
</script>

Publicar un comentario

0 Comentarios