#activar ~ .desplegable {display: none;overflow: hidden;} #activar:checked ~ .desplegable {display: block;} -->
Plantilla Melina para blogger
Enviar mensajes de whatsapp guardan el número
Ventanas modales para imágenes y videos
Texto sobre imágenes con CSS
Efectos imágenes
Gourmet
Slider de imágenes con jQuery
Cambia el enlace de Leer Más en blogger
Modo de arranque rápido en Windows 10
Generador de Tooltip
Teclado Windows 10
Menu vertical jGlideMenu

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