Diskuze: posouvání stránky myší
V předchozím kvízu, Online test znalostí JavaScript, jsme si ověřili nabyté zkušenosti z kurzu.
Člen
Peter Mlich:17.12.2018 11:43
Editováno
<style>
.mapa {
position:relative;
background-image:url(https://www.google.com/logos/doodles/2018/80th-anniversary-of-the-rapid-arrows-6214742761799680-l.png);
width:200px;
height:200px;
background-position:0 0;
background-repeat:no-repeat;
border:1px solid #888;
top:200px;
left:300px;
cursor:move;
}
</style>
<div id="mapa" class="mapa" onmousedown="rrr.startMove(event)" onmousemove="rrr.move(event)" onmouseup="rrr.stopMove(event)" onmouseout="rrr.stopMove(event)"></div>
<script>
var rrr;
rrr = {};
rrr.started = false;
rrr.img = {};
rrr.img.el = document.getElementById('mapa');
rrr.img.pos = {x:0, y:0};
rrr.mouse = {};
rrr.mouse.start = {x:0, y:0};
rrr.mouse.move = {x:0, y:0};
rrr.mouse.end = {x:0, y:0};
rrr.diffStop = function (index)
{
return rrr.mouse.end[index] - rrr.mouse.start[index];
}
rrr.getMouse = function (event)
{
var target, x, y;
event = event || window.event; // IE-ism
target = event.target ? event.target : event.srcElement ? event.srcElement : null;
x = event.x ? event.x : event.clientX;
y = event.y ? event.y : event.clientY; // var cursorX = e.pageX; // var cursorY = e.pageY;
return {x: x, y: y};
}
rrr.startMove = function (event)
{
rrr.started = true;
rrr.mouse.start = rrr.getMouse(event)
}
rrr.move = function (event)
{
var pos, start, move;
if (rrr.started==false)
{return;}
pos = {};
pos.x = rrr.img.pos.x; // kopie pos
pos.y = rrr.img.pos.y;
start = rrr.mouse.start;
move = rrr.getMouse(event);
pos.x = pos.x - (move.x - start.x);
pos.y = pos.y - (move.y - start.y);
rrr.img.el.style.backgroundPosition = (-pos.x)+"px "+(-pos.y)+"px";
}
rrr.stopMove = function (event)
{
var pos, start, end;
if (rrr.started==false)
{return;}
rrr.started = false;
pos = rrr.img.pos; // pointer na pos
start = rrr.mouse.start;
end = rrr.getMouse(event)
pos.x = pos.x - (end.x - start.x);
pos.y = pos.y - (end.y - start.y);
rrr.img.pos = pos;
rrr.img.el.style.backgroundPosition = (-pos.x)+"px "+(-pos.y)+"px";
}
</script>
Akceptované řešení
+20 Zkušeností
+2,50 Kč
+20 Zkušeností
+2,50 Kč
Petr Fiedler:18.12.2018 19:34
Díky, mám hotovo!
Teď si říkám, proč jsem došel hned k závěru, že to nejde, když na tom
není vůbec nic složitého 
. Kdybych se trochu zamyslel, hned by mě to napadlo. Dodělal jsem to
takhle:
v rrr.move a rrr.stopMove jsem místo
rrr.img.el.style.backgroundPosition = (-pos.x)+"px "+(-pos.y)+"px";napsal
rrr.img.el.style.left = (-pos.x)+ 'px';
rrr.img.el.style.top = (-pos.y)+ 'px';A do divu mapa jsem ještě přidal nový div a ten jsem místo mapy
definoval jako rrr.img.el a dal jsem mu stejné atributy. Kdybych tohle
neudělal, posouvalo by se mi jediné místo, ve kterém se dá posouvat, takže
po posunutí by se nedalo posouvat v místě, kde neleží. Takhle mi div mapa
zůstává furt na jednom místě a posouvá se jen vnitřní div.
Vše teď funguje jak má.
Zobrazeno 9 zpráv z 9.