JavaScript - Bilder Zoom-Funktion

Bild zoomen, über die Scrollleisten kann dann zum gewünschten Bildausschnitt gescrollt werden.

Zoom:

Vergrößere den Zoomfaktor bis die "Mariannenbrücke" in München erscheint.


<style>

div#border {
 
width450px;
 
height350px;
 
overflowAuto;
 
overscroll-behaviorContain;
 
margin-top5px;
 
scrollbar-widththin;
 
scrollbar-color#AAA;
}

div#border::-webkit-scrollbar {
  
width5px;
  
height5px;
}

div#border::-webkit-scrollbar-thumb {
  
background#AAA;
}

div#border img#img {
 
max-width100%;
 
heightAuto;
 
object-fitCover;
}

input#zoomer {
 
width390px;
 
vertical-alignMiddle;
}
</
style>

<
script>
function 
zoom(z) {
 
document.getElementById("img").style.transform=" scale("+z+", "+z+")";
 
document.getElementById("img").style.width=(z*100)+"%";
}
</
script>

<
div>Zoom
<
input type="range" id="zoomer" value="1" min="1" max="10" step="0.1"
 
oninput="zoom(this.value)"></div>

<
div id="border"><img src="bild.jpg" id="img"></div>

Beispiel 2

Quelltext: Siehe Kommentar (#11)

Bausteine  Alle Anzeigen

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

<bdo> Textrichtung

CSS - Diagonaler Streifen-Effekt

PHP - Datum zerlegen 2

JavaScript - Leerzeichen am Anfang und Ende einer Zeichenkette entfernen

MySQL - Tabelle nach 7 Tagen leeren

Inhalt vom Design trennen
ndem es die Möglichkeit zum Einbinden von anderen Dateien in PHP gibt, macht es Ihnen PHP recht einfach, das Design und die Navigation Ihrer Webseite voneinander zu trennen. Der include(...)-Befehl in PHP erlaubt es, andere Dateien in die aktuelle einzubinden. Damit ist es möglich, immer wiederkehrende, identische Bereiche einer Webseite in anderen Dateien auszulagern. Diese Dateien werden dann in die eigentliche Seite eingebunden.