Bildschirmlupe.html
Quell Code
<!DOCTYPE HTML> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script> <style> body{ display: flex; flex-direction:column; flex-wrap: wrap; align-content: center; align-items: center; } h1,p{ text-align:center; } #myimage{ width:600px; height:auto; } #butt{ width:100px; margin-left:calc(50% - 50px); } .img-magnifier-glass { position:relative; z-index:1; width: 100px; height: 100px; border-radius:50%; border:2px solid blue; } .lupe{ width:200px; height:200px; } </style> <script> function magnify(imgID, zoom) { var img, glass, w, h, bw; img = document.getElementById(imgID); glass = document.createElement("DIV"); glass.setAttribute("class", "img-magnifier-glass"); img.parentElement.insertBefore(glass, img); 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; glass.addEventListener("mousemove", moveMagnifier); img.addEventListener("mousemove", moveMagnifier); glass.addEventListener("touchmove", moveMagnifier); img.addEventListener("touchmove", moveMagnifier); function moveMagnifier(e) { var pos, x, y; e.preventDefault(); pos = getCursorPos(e); x = pos.x; y = pos.y; 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;} glass.style.left = (x - w) -220+ "px"; glass.style.top = (y - h) +120+ "px"; 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; a = img.getBoundingClientRect(); x = e.pageX - a.left; y = e.pageY - a.top; x = x - window.pageXOffset; y = y - window.pageYOffset; return {x : x, y : y}; } } function Testfunktion() { document.getElementById("myimage").style.visibility = "visible"; magnify("myimage", 3); } </script> </head> <body> <div align = "center"> <h1>Image Magnifier Glass</h1> <p>Mouse over the image:</p> <input type = "button" value = "KLICK" onclick = "Testfunktion();"/><br><br> <div class="img-magnifier-container"> <img id="myimage" src="https://www.w3schools.com/howto/img_nature.jpg" width="600" height="400" style = "visibility:hidden"/> </div> </div> </body> </html>
Comments (1)
Die Canvas Balken Uhr ist ja mal Fett