Hallo allemaal,
Ik ben bezig met een virtual tour in javascript. Mijn code tot zover:
Spoiler tonen
HTML
<!DOCTYPE HTML>
<html>
<head>
<title>Panorama</title>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
var armed = false; //If button is currently pressed
var previousPosition; //Previous position of the mouse
var position; //Current position of the mouse
var difpos; //Different between previous and current position of the mouse
var offset = 0;
var boxoffset;
var size = 3243;
var pan_selected = 0;
var pan_box = [
[[1,550,150],[1,250,250]],
[[0,200,200],[0,300,300]]
];
/* initial */
$('.panorama').css('background-image','url(\'' + pan_selected + '.jpg\')');
for(var i = 0; i < pan_box[pan_selected].length; i++)
{
$('#boxholder').append('<div class="box" id="'+i+'" style="left: ' + pan_box[pan_selected][i][1] + 'px; top: ' + pan_box[pan_selected][i][2] + 'px"></div>');
}
/***********/
$('.panorama').mousedown(function(){
armed = true;
});
$('.panorama').mouseup(function(){
armed = false;
previousPosition = undefined;
});
$('.panorama').mousemove(function(e){
if(armed)
{
position = e.pageX;
if(previousPosition === undefined)
{
previousPosition = position;
}
difpos = previousPosition - position;
offset += difpos;
previousPosition = position;
$('.panorama').css('background-position',offset);
$('#0').css('left',offset+550);
$('#1').css('left',offset);
}
});
});
</script>
<style type="text/css">
body {
margin: 0;
}
.panorama {
height: 500px;
background-size: auto 100%;
}
.box {
height: 50px;
width: 50px;
background-color: red;
position: absolute;
}
</style>
</head>
<body>
<div class="panorama">
<div id="boxholder"></div>
</div>
</body>
</html>Nu wil ik graag dat de rode vlakjes op hetzelfde punt zitten elke keer als je ronddraait. Dit is nu niet het geval. De offset zal blijven oplopen en zal na de eerste keer niet meer verschijnen in de viewport. Al verschillende methodes geprobeerd. Onder andere om te checken of de box de maximiale breedte van de afbeelding heeft overschreden en dan de offset aan 0 te stellen. Dit werkte niet, omdat de muispositie niet per pixel wordt geregistreerd en het vlak dus telkens op een andere plek verscheen.
Ik ben nu een aantal uren bezig, maar kom er niet uit. Iemand een idee of een hele andere aanpak?
