Tengo una página cuya imagen de fondo escalas como el navegador re-tamaños. Lo que estoy tratando de averiguar es cómo hacer que el marcador azul escala de la imagen y mantener la posición en proporción a la de fondo. Por ejemplo, si el marcador azul estaban en la punta de la bahía, como he escalado el navegador, me gustaría que el marcador de permanecer en la punta de la bahía, y reducir de tamaño proporcionalmente con el navegador de nuevas dimensiones.

Alguien tiene alguna idea que me apunte en la dirección correcta?

He utilizado el siguiente método para encontrar el tamaño del navegador, pero creo que mis matemáticas son un poco fuera. Usted puede ver el ejemplo en vivo aquí:

http://mikeheavers.com/stage/full_screen_map/

El marcador es realmente fuera de si la escala es en una dirección más que el otro.

    <style type="text/css">
html {
background: url(images/antigua.jpeg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#infoDiv {
background: white;
padding: 20px;
width: 200px;
position:absolute;
}
#map_canvas {
position:absolute   ;
}
.marker {
position:absolute;
left: 800px;
top: 400px;
height: 20px;
width: 20px;
background: #ff0000;
}
</style>
<script type="text/javascript" charset="utf-8" src="js/jquery-1.4.4.min.js"></script>
<div id="infoDiv">
</div>
<div id="markers">
<div class="marker">
</div>
</div>
<script type="text/javascript">
$(document).ready(function() 
{   
var myWidth = window.innerWidth;
var leftVal = $("#markers").children().css('left');
var leftValNumber = parseFloat(leftVal);
var leftRatio = leftValNumber / myWidth;
var leftValPos;
var myHeight = window.innerHeight;
var topVal = $("#markers").children().css('top');
var topValNumber = parseFloat(topVal);
var topRatio = topValNumber / myHeight;
var topValPos;
var scaleRatio;
if (myWidth > myHeight){
scaleRatio = 20/myWidth;
} else {
scaleRatio = 20/myHeight;
}
window.onresize = function() {
sizeMarkers();
}
function init()
{
sizeMarkers();
}
function sizeMarkers()
{
if( typeof( window.innerWidth ) == 'number' ) {
//Non-IE
myWidth = window.innerWidth;
myHeight = window.innerHeight;
} else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
//IE 6+ in 'standards compliant mode'
myWidth = document.documentElement.clientWidth;
myHeight = document.documentElement.clientHeight;
} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
//IE 4 compatible
myWidth = document.body.clientWidth;
myHeight = document.body.clientHeight;
}
topVal = $("#markers").children().css('top');
topValNumber = parseFloat(topVal);
topValPos = topRatio * myHeight;
leftVal = $("#markers").children().css('top');
leftValNumber = parseFloat(leftVal);
leftValPos = leftRatio * myWidth;
if (myWidth < myHeight){
$("#markers").children().width(myWidth*scaleRatio);
$("#markers").children().height(myWidth*scaleRatio);
} else {
$("#markers").children().width(myHeight*scaleRatio);
$("#markers").children().height(myHeight*scaleRatio);
}
$("#markers").children().css('top',topValPos);
$("#markers").children().css('left',leftValPos);
$("#infoDiv").html( 'Width = ' + myWidth + ' | Height = ' + myHeight + ' | Top Value: ' + topValPos + ' | Left Value: ' + leftValPos);
}
init();
});
</script>
  • No es Javascript «muertos-tech»? Pensé que parte del punto de HTML5 sería que nos gustaría ser capaz de atenerse a un lenguaje universal.
  • HTML5 es en realidad un lenguaje de marcado; hay todo un conjunto de tecnologías que giran a su alrededor, incluyendo JavaScript y CSS.
InformationsquelleAutor Mike | 2010-12-14

1 Comentario

Dejar respuesta

Please enter your comment!
Please enter your name here