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

Eine zufällige Auswahl von „Bausteinen” (Snippets) aus den Bereichen CSS, PHP, JavaScript und MySQL.

CSS - Blinkende Inhalte mit Keyframes

PHP - IP und Host ausgeben

JavaScript - Ein farbig blinkender Text

MySQL - Datensatz Wert um 10% veringern