nietaL
NGBler
Mit einem Doppelklick auf ein Bild (HTML Z.5) wird ein Zoom ausgeführt und ein eventlistener hinzugefügt (JS Z.52), der darauf achtet, ob eine Pfeiltaste gedrückt wird, um das gezoomte Bild zu verschieben (JS Z.56).
Wird wieder doppelt geklickt, soll der eventlistener wieder gelöscht werden (JS Z. 35).
Der Ein- und Auszoomen sowie das Umhersliden auf der Karte funktioniert, wie es soll. Leider entfernt er nicht den Eventlistener und jedesmal wenn ich einmal hineinzoome, wird ein weiterer Listener hinzugefügt und somit auch jede Pfeiltaste 2, 3, 4, 5mal ausgewertet. Somit wird bei jedem Zoomen das Sliden schneller.
Könnt ihr mir sagen, warum er den listener nicht entfernt?
Austesten könnt ihr es hier: http://ouraltis.de/experiment
Liebe Grüße!
PS: Bitte nicht über die Unordnung schimpfen. Es ist ein Sandkasten.
[src=javascript]
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script language="jscript" type="text/javascript">
function mouse_pos()
{
$("#karte").mousemove(function(event){
relX = event.pageX - $("#karte").offset().left;
relY = event.pageY - $("#karte").offset().top;
});
}
function zoom()
{
gebiete = ['gebiet1'];
if(document.getElementById('karteninhalt').style.width == '3388px')
{
document.getElementById('karteninhalt').style.top = '0px';
document.getElementById('karteninhalt').style.left = '0px';
document.getElementById('karteninhalt').style.width = '1150px';
document.getElementById('karteninhalt').style.height = '950px';
gebiete.forEach(function(element)
{
document.getElementById(element).style.width = (parseInt(document.getElementById(element).style.width.split('px')) / 2)+'px';
document.getElementById(element).style.height = (parseInt(document.getElementById(element).style.height.split('px')) / 2)+'px';
document.getElementById(element).style.top = (parseInt(document.getElementById(element).style.top.split('px')) / 2)+'px';
document.getElementById(element).style.left = (parseInt(document.getElementById(element).style.left.split('px')) / 2)+'px';
});
document.removeEventListener("keydown", slide);
}
else
{
document.getElementById('karteninhalt').style.top = -(relY*2)+'px';
document.getElementById('karteninhalt').style.left = -(relX*2)+'px';
document.getElementById('karteninhalt').style.width = '3388px';
document.getElementById('karteninhalt').style.height = '2799px';
gebiete.forEach(function(element)
{
document.getElementById(element).style.width = (parseInt(document.getElementById(element).style.width.split('px')) * 2)+'px';
document.getElementById(element).style.height = (parseInt(document.getElementById(element).style.height.split('px')) * 2)+'px';
document.getElementById(element).style.top = (parseInt(document.getElementById(element).style.top.split('px')) * 2)+'px';
document.getElementById(element).style.left = (parseInt(document.getElementById(element).style.left.split('px')) * 2)+'px';
});
document.addEventListener("keydown", slide);
}
function slide (event)
{
event.preventDefault();
if (event.keyCode == 39 && document.getElementById('karteninhalt').style.width == '3388px')
{
var bild_left_srg = document.getElementById('karteninhalt').style.left;
var bild_left_val = bild_left_srg.split('px');
var bild_left_new = parseInt(bild_left_val) - 300;
if (bild_left_new < -2250) {bild_left_new = -2250;}
document.getElementById('karteninhalt').style.left = bild_left_new + 'px';
}
if (event.keyCode == 37 && document.getElementById('karteninhalt').style.width == '3388px')
{
var bild_left_srg = document.getElementById('karteninhalt').style.left;
var bild_left_val = bild_left_srg.split('px');
var bild_left_new = parseInt(bild_left_val) + 300;
if (bild_left_new > 0) {bild_left_new = 0;}
document.getElementById('karteninhalt').style.left = bild_left_new + 'px';
}
if (event.keyCode == 38 && document.getElementById('karteninhalt').style.width == '3388px')
{
var bild_top_srg = document.getElementById('karteninhalt').style.top;
var bild_top_val = bild_top_srg.split('px');
var bild_top_new = parseInt(bild_top_val) + 300;
if (bild_top_new > 0) {bild_top_new = 0;}
document.getElementById('karteninhalt').style.top = bild_top_new + 'px';
}
if (event.keyCode == 40 && document.getElementById('karteninhalt').style.width == '3388px')
{
var bild_top_srg = document.getElementById('karteninhalt').style.top;
var bild_top_val = bild_top_srg.split('px');
var bild_top_new = parseInt(bild_top_val) - 300;
if (bild_top_new < -1850) {bild_top_new = -1850;}
document.getElementById('karteninhalt').style.top = bild_top_new + 'px';
}
};
}
</script>
[/src]
[src=html4strict]
<body background="tisch_6.jpg">
<div id="karte" onMouseOver="mouse_pos();" onDblClick="zoom();" style="position: absolute; width: 1150px; height: 950px; z-index: 3; overflow: hidden; left: 396px; top: 168px; transform: rotate(-3deg);">
<div id="rahmen" style="position:absolute; background-image:url(rahmen.png); height:950px; width: 1150px; left:0px; top:0px; background-size: contain; z-index:3;"></div>
<div id="struktur" style="position:absolute; background-image:url(struktur.png); height:874px; width: 1074px; left:38px; top:38px; background-size: contain; z-index:2; opacity:0.2"></div>
<div id="karteninhalt" style="position:absolute; width: 1150px; height: 950px; left:0px; top:0px; transition: 0.7s; z-index:1;">
<div id="gebiet1" style="position: absolute; left: 314px; top: 252px; width: 59px; height: 50px; transition: 0.7s; background-image:url(tile.png); background-size: contain; background-repeat: no-repeat; "></div>
<img src="karte_hg.jpg" width="100%" height="100%" />
</div>
</div>
[/src]
Wird wieder doppelt geklickt, soll der eventlistener wieder gelöscht werden (JS Z. 35).
Der Ein- und Auszoomen sowie das Umhersliden auf der Karte funktioniert, wie es soll. Leider entfernt er nicht den Eventlistener und jedesmal wenn ich einmal hineinzoome, wird ein weiterer Listener hinzugefügt und somit auch jede Pfeiltaste 2, 3, 4, 5mal ausgewertet. Somit wird bei jedem Zoomen das Sliden schneller.
Könnt ihr mir sagen, warum er den listener nicht entfernt?
Austesten könnt ihr es hier: http://ouraltis.de/experiment
Liebe Grüße!
PS: Bitte nicht über die Unordnung schimpfen. Es ist ein Sandkasten.
[src=javascript]
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script language="jscript" type="text/javascript">
function mouse_pos()
{
$("#karte").mousemove(function(event){
relX = event.pageX - $("#karte").offset().left;
relY = event.pageY - $("#karte").offset().top;
});
}
function zoom()
{
gebiete = ['gebiet1'];
if(document.getElementById('karteninhalt').style.width == '3388px')
{
document.getElementById('karteninhalt').style.top = '0px';
document.getElementById('karteninhalt').style.left = '0px';
document.getElementById('karteninhalt').style.width = '1150px';
document.getElementById('karteninhalt').style.height = '950px';
gebiete.forEach(function(element)
{
document.getElementById(element).style.width = (parseInt(document.getElementById(element).style.width.split('px')) / 2)+'px';
document.getElementById(element).style.height = (parseInt(document.getElementById(element).style.height.split('px')) / 2)+'px';
document.getElementById(element).style.top = (parseInt(document.getElementById(element).style.top.split('px')) / 2)+'px';
document.getElementById(element).style.left = (parseInt(document.getElementById(element).style.left.split('px')) / 2)+'px';
});
document.removeEventListener("keydown", slide);
}
else
{
document.getElementById('karteninhalt').style.top = -(relY*2)+'px';
document.getElementById('karteninhalt').style.left = -(relX*2)+'px';
document.getElementById('karteninhalt').style.width = '3388px';
document.getElementById('karteninhalt').style.height = '2799px';
gebiete.forEach(function(element)
{
document.getElementById(element).style.width = (parseInt(document.getElementById(element).style.width.split('px')) * 2)+'px';
document.getElementById(element).style.height = (parseInt(document.getElementById(element).style.height.split('px')) * 2)+'px';
document.getElementById(element).style.top = (parseInt(document.getElementById(element).style.top.split('px')) * 2)+'px';
document.getElementById(element).style.left = (parseInt(document.getElementById(element).style.left.split('px')) * 2)+'px';
});
document.addEventListener("keydown", slide);
}
function slide (event)
{
event.preventDefault();
if (event.keyCode == 39 && document.getElementById('karteninhalt').style.width == '3388px')
{
var bild_left_srg = document.getElementById('karteninhalt').style.left;
var bild_left_val = bild_left_srg.split('px');
var bild_left_new = parseInt(bild_left_val) - 300;
if (bild_left_new < -2250) {bild_left_new = -2250;}
document.getElementById('karteninhalt').style.left = bild_left_new + 'px';
}
if (event.keyCode == 37 && document.getElementById('karteninhalt').style.width == '3388px')
{
var bild_left_srg = document.getElementById('karteninhalt').style.left;
var bild_left_val = bild_left_srg.split('px');
var bild_left_new = parseInt(bild_left_val) + 300;
if (bild_left_new > 0) {bild_left_new = 0;}
document.getElementById('karteninhalt').style.left = bild_left_new + 'px';
}
if (event.keyCode == 38 && document.getElementById('karteninhalt').style.width == '3388px')
{
var bild_top_srg = document.getElementById('karteninhalt').style.top;
var bild_top_val = bild_top_srg.split('px');
var bild_top_new = parseInt(bild_top_val) + 300;
if (bild_top_new > 0) {bild_top_new = 0;}
document.getElementById('karteninhalt').style.top = bild_top_new + 'px';
}
if (event.keyCode == 40 && document.getElementById('karteninhalt').style.width == '3388px')
{
var bild_top_srg = document.getElementById('karteninhalt').style.top;
var bild_top_val = bild_top_srg.split('px');
var bild_top_new = parseInt(bild_top_val) - 300;
if (bild_top_new < -1850) {bild_top_new = -1850;}
document.getElementById('karteninhalt').style.top = bild_top_new + 'px';
}
};
}
</script>
[/src]
[src=html4strict]
<body background="tisch_6.jpg">
<div id="karte" onMouseOver="mouse_pos();" onDblClick="zoom();" style="position: absolute; width: 1150px; height: 950px; z-index: 3; overflow: hidden; left: 396px; top: 168px; transform: rotate(-3deg);">
<div id="rahmen" style="position:absolute; background-image:url(rahmen.png); height:950px; width: 1150px; left:0px; top:0px; background-size: contain; z-index:3;"></div>
<div id="struktur" style="position:absolute; background-image:url(struktur.png); height:874px; width: 1074px; left:38px; top:38px; background-size: contain; z-index:2; opacity:0.2"></div>
<div id="karteninhalt" style="position:absolute; width: 1150px; height: 950px; left:0px; top:0px; transition: 0.7s; z-index:1;">
<div id="gebiet1" style="position: absolute; left: 314px; top: 252px; width: 59px; height: 50px; transition: 0.7s; background-image:url(tile.png); background-size: contain; background-repeat: no-repeat; "></div>
<img src="karte_hg.jpg" width="100%" height="100%" />
</div>
</div>
[/src]