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.

<ins> Logische Auszeichnung

CSS - Wasserzeicheneffekt - Hintergrundbild fixieren

PHP - Ermittlung des Plurals

JavaScript - Text in Großbuchstaben oder Kleinbuchstaben umwandeln

MySQL - Alle Einträge ab einem bestimmten Datum ausgeben

Suchfunktion
Zu jeder guten Homepage gehört eine Suchfunktion als Service. Hier können Ihre Besucher, nach Inhalten auf Ihrer Homepage suchen. Kostenlose Suchfunktionen auf Basis von PHP gibt es viele im Web. Bei einigen Suchfunktionen wird eine Liste des gesuchten erstellt, was Ihre Besucher auf Ihrer Homepage gesucht haben.