Ich versuche, ein Bild mit zwei Zoomschaltflächen (+) & (-) ein- und auszoomen. Das Problem ist, dass das "Vergrößern" angehalten wird, wenn das Bild die volle Bildschirmgröße (Breite 100%) hat. Ich muss das Bild viel größer als die Bildschirmgröße vergrößern. Ich kann es einfach nicht herausfinden, wie man das macht. Ich bin Anfänger mit Javascript, daher hoffe ich, dass jemand die Motivation hat, mir dieses kleine Javascript-Problem zu helfen.
Ich frage mich, ob es einfache Ein-/Aus/Zurücksetzen-Plugins gibt, die mit Zoom-Tasten funktionieren. Image Grab wäre mehr als cool.
Danke noch einmal!
function zoomin(){
var myImg = document.getElementById("map");
var currWidth = myImg.clientWidth;
if(currWidth == 2500) return false;
else{
myImg.style.width = (currWidth + 100) + "px";
}
}
function zoomout(){
var myImg = document.getElementById("map");
var currWidth = myImg.clientWidth;
if(currWidth == 100) return false;
else{
myImg.style.width = (currWidth - 100) + "px";
}
}
*body {
margin: 0;
}
#navbar {
overflow: hidden;
background-color: #099;
position: fixed;
top: 0;
width: 100%;
padding-top: 3px;
padding-bottom: 3px;
padding-left: 20px;
}
#navbar a {
float: left;
display: block;
color: #666;
text-align: center;
padding-right: 20px;
text-decoration: none;
font-size: 17px;
}
#navbar a:hover {
background-color: #ddd;
color: black;
}
#navbar a.active {
background-color: #4CAF50;
color: white;
}
.main {
padding: 16px;
margin-top: 30px;
}
.main img {
max-width: 100%;
height: auto;
}
.button {
width: 300px;
height: 60px;
}
</head>
<body>
<div id="navbar">
<button type="button" onclick="zoomin()"> Zoom In</button>
<button type="button" onclick="zoomout()"> Zoom Out</button>
</div>
<div class="main">
<img id="map" src="http://www.worldatlas.com/webimage/countrys/europelargesm.jpg" />
</div>
"/>
Da in den vorherigen Antworten angegeben wurde, dass Ihr Code mit Ausnahme von absolut in Ordnung ist, haben Sie die maximale Breite Ihres Bildes mit max-width: 100%
begrenzt. Wenn Sie das entfernen, erhalten Sie die gewünschte Ausgabe.
function zoomin() {
var myImg = document.getElementById("map");
var currWidth = myImg.clientWidth;
if (currWidth == 2500) return false;
else {
myImg.style.width = (currWidth + 100) + "px";
}
}
function zoomout() {
var myImg = document.getElementById("map");
var currWidth = myImg.clientWidth;
if (currWidth == 100) return false;
else {
myImg.style.width = (currWidth - 100) + "px";
}
}
*body {
margin: 0;
}
#navbar {
overflow: hidden;
background-color: #099;
position: fixed;
top: 0;
width: 100%;
padding-top: 3px;
padding-bottom: 3px;
padding-left: 20px;
}
#navbar a {
float: left;
display: block;
color: #666;
text-align: center;
padding-right: 20px;
text-decoration: none;
font-size: 17px;
}
#navbar a:hover {
background-color: #ddd;
color: black;
}
#navbar a.active {
background-color: #4CAF50;
color: white;
}
.main {
padding: 16px;
margin-top: 30px;
width: 100%;
height: 100vh;
overflow: auto;
cursor: grab;
cursor: -o-grab;
cursor: -moz-grab;
cursor: -webkit-grab;
}
.main img {
height: auto;
width: 100%;
}
.button {
width: 300px;
height: 60px;
}
<script type="text/javascript" src="https://cdn.rawgit.com/asvd/dragscroll/master/dragscroll.js"></script>
<body>
<div id="navbar">
<button type="button" onclick="zoomin()"> Zoom In</button>
<button type="button" onclick="zoomout()"> Zoom Out</button>
</div>
<div class="main dragscroll">
<img id="map" src="http://www.worldatlas.com/webimage/countrys/europelargesm.jpg" />
</div>
Bearbeitungen:
main
-Container mit dem Namen "dragscroll" eine weitere CSS-Klasse hinzugefügt, und es wird js importiert.Max-Breite entfernen: 100%; von .main img css
Ihre Zoom-Methode funktioniert gut. Entfernen Sie nur die Breite der CSS-Breite und ändern Sie Ihre JS-Überprüfung, damit das Bild größer wird.
function zoomin(){
var myImg = document.getElementById("map");
var currWidth = myImg.clientWidth;
//if(currWidth == 2500) return false;
// else{
// myImg.style.width = (currWidth + 100) + "px";
//}
myImg.style.width = (currWidth + 100) + "px";
}
function zoomout(){
var myImg = document.getElementById("map");
var currWidth = myImg.clientWidth;
if(currWidth == 100) return false;
else{
myImg.style.width = (currWidth - 100) + "px";
}
}
*body {
margin: 0;
}
#navbar {
overflow: hidden;
background-color: #099;
position: fixed;
top: 0;
width: 100%;
padding-top: 3px;
padding-bottom: 3px;
padding-left: 20px;
}
#navbar a {
float: left;
display: block;
color: #666;
text-align: center;
padding-right: 20px;
text-decoration: none;
font-size: 17px;
}
#navbar a:hover {
background-color: #ddd;
color: black;
}
#navbar a.active {
background-color: #4CAF50;
color: white;
}
.main {
padding: 16px;
margin-top: 30px;
}
.main img {
/* max-width: 100%; */
height: auto;
}
.button {
width: 300px;
height: 60px;
}
</head>
<body>
<div id="navbar">
<button type="button" onclick="zoomin()"> Zoom In</button>
<button type="button" onclick="zoomout()"> Zoom Out</button>
</div>
<div class="main">
<img id="map" src="http://www.worldatlas.com/webimage/countrys/europelargesm.jpg" />
</div>
Andererseits würde ich magic zoom als Zoom-Bibliothek empfehlen