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.

<mark> Physische Auszeichnung

CSS - Parallax Scrolling-Effekt

PHP - Auswahlliste mit Mehrfachauswahl auswerten

JavaScript - Überprüfen ob ein Button gedrückt wurde

MySQL - Anzahl der Datensätze einer Spalte

Freiraum
Quetschen Sie nicht so viel Text, Links und Bilder auf eine Seite. Lassen Sie freien Raum. Der Besucher wird es ihnen danken, außerdem erhöht es die Übersichtlichkeit.