CSS - desplaza la imagen de la pelota de tenis hasta la posicion indicada por las coordenadas de las cajas

 
Vista:
sin imagen de perfil
Val: 1
Ha aumentado su posición en 19 puestos en CSS (en relación al último mes)
Gráfica de CSS

desplaza la imagen de la pelota de tenis hasta la posicion indicada por las coordenadas de las cajas

Publicado por debugger (1 intervención) el 25/11/2019 21:23:22
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Ejercicio4 </title>
<style type="text/css">
 
 
</style>
<script language="javascript" type="text/javascript">
function fdesplazar(){
 
 
}
 
</script>
</head>
 
 
</html>
<body>
<h2>Desplazar pelota de tenis</h2>
<label for="cajatop">TOP en px:</label><input type="text" id="cajatop"><br>
<label for="cajaleft">LEFT en px:</label><input type="text" id="cajaleft"><br>
<input type="button" value="MOVER" onClick="fdesplazar()">
 
<div id="cajapelota"><img src="imagenes/pelota.png"></div>
</body>

pelota
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de joel
Val: 870
Oro
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

desplaza la imagen de la pelota de tenis hasta la posicion indicada por las coordenadas de las cajas

Publicado por joel (252 intervenciones) el 26/11/2019 08:17:17
Aquí te he modificado un poco el código, haber si te sirve

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Ejercicio4 </title>
 
    <style>
    #cajapelota {
        position:fixed;
        transition: all 0.8s ease-out;
    }
    </style>
 
    <script>
    function fdesplazar(){
        const pelota=document.getElementById("cajapelota");
        pelota.style.top=document.getElementById("cajatop").value+"px";
        pelota.style.left=document.getElementById("cajaleft").value+"px";
    }
    </script>
</head>
 
<body>
 
    <h2>Desplazar pelota de tenis</h2>
 
    <label for="cajatop">TOP en px:</label><input type="text" id="cajatop"><br>
    <label for="cajaleft">LEFT en px:</label><input type="text" id="cajaleft"><br>
    <input type="button" value="MOVER" onClick="fdesplazar()">
 
    <div id="cajapelota"><img src="imagenes/pelota.png"></div>
 
</body>
</html>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar