JavaScript - Bild mit dem Mausrad vergrößern


<style>

img#bild {
 
displayBlock;
 
marginAuto;
 
width444px;
 cursor: n-resize;
}
</
style>

<
script>
// Bild mit dem Mausrad vergrößern

var max 1;
var 
mor 1;

function 
zoom(event) {
 
event.preventDefault();
 var 
wert Math.floor(event.deltaY);

// Verringern
 
if (wert 0) {
  
mor -= 1;
  if (
mor 0) {
   
mor 9;
   
max--;
  }
 }

// Erhöhen
 
if (wert 0) {
  
mor += 1;
  if (
mor 9) {
   
mor 0;
   
max++;
  }
 }


 if (
max <= 0) {
  
max 1;
  
mor 0;
 }

 
document.getElementById("bild").style.transform="scale(" max "." mor ", " max "." mor ")";
}
</
script>

<
img src="bild.png" id="bild" onwheel="zoom(event)">

Siehe auch: JavaScript - Zahl in einem Eingabefeld mit dem Mausrad verändern

Bausteine  Alle Anzeigen

Eine zufällige Auswahl von Codeschnipseln aus den Bereichen HTML, CSS, PHP, JavaScript und MySQL.

<bdi> Textrichtung

CSS - Ladeanimation ohne Bild-Grafik

PHP - Lange Links automatisch kürzen

JavaScript - HTML 5 - Pflichtfeld setzen mit JavaScript

MySQL - Datum (DATETIME) in ein deutsches Datumsformat umwandeln