Movendo HTML com Botões












CÓDIGO HTML


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    input:hover {
        background-color: rgb(152, 231, 152);
    }
   

</style>


<body style="background-color: grey;">
   
   
    <div style = "width:680px; height:30 px;margin-top:25px;  text-align: center;">
        <input type="button" id="Acima"    value="Acima"     style ="width:70px; height:20 px; text-align:center;"><br/>
        <input type="button" id="Direita"  value="Direita"   style ="width:70px; height:20 px; text-align:center;" >
        <input type="button" id="Esquerda" value="Esquerda"  style ="width:70px; height:20 px; text-align:center;" ><br/>
        <input type="button" id="Abaixo"   value="Abaixo"    style ="width:70px; height:20 px; text-align:center;" >
    </div>
         <div id="tabuleiro" style = "background-color:white;margin-top:30px; margin-left: 50px; width: 610px ; height: 460px; border:4px solid black;">
        <div  id="elemento" style="border-radius: 50%;border:1px solid #ff0000a4;background-color: red; width:8px; height:8px;margin-top:2px;margin-left:2px;"></div></div>
   

</body>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script type="text/javascript">







$(function() {
    x=2;
    y=2;
    $("#Direita").click( function(){
       
        x=x-10;
        if (x<10){
            x=598;
        }
    $("#elemento").animate({

        marginLeft: x+"px",
        marginTop: y +"px"},10, function () {
       
    });
});

$("#Esquerda").click(function(){
        x=x+10;
        if (x>598){
            x=2;
        }
    $("#elemento").animate({

    marginLeft: x+"px",
    marginTop: y+"px"},10, function () {
       
    });  
});

$("#Acima").click(function(){
        y=y-10;
        if (y<2){
            y=449;
        }
    $("#elemento").animate({

    marginLeft: x+"px",
    marginTop: y+"px"},10, function () {
       
    });  
});

$("#Abaixo").click(function(){
        y=y+10;
        if (y>449){
            y=2;
        }
    $("#elemento").animate({

    marginLeft: x+"px",
    marginTop: y+"px"},10, function () {
       
    });  
});

});

</script>
</html>



Comentários

Postar um comentário

Postagens mais visitadas deste blog

CD4511 - Display 7 Segmentos

Imagem
  #define bin1 4 #define bin2 5 #define bin3 6 #define bin4 7 int Bin[11][4] = {{0,0,0,0},{1,0,0,0},{0,1,0,0},{1,1,0,0},                   {0,0,1,0},{1,0,1,0},{0,1,1,0},{1,1,1,0},                   {0,0,0,1},{1,0,0,1},{0,1,0,1}}; int d=1000; void setup(){      pinMode(bin1, OUTPUT);   pinMode(bin2, OUTPUT);   pinMode(bin3, OUTPUT);   pinMode(bin4, OUTPUT);   } void loop(){        for (int a=0;a<=10;a++){                      digitalWrite(bin1, Bin[a][0]);          digitalWrite(bin2, Bin[a][1]);          digitalWrite(bin3, Bin[a][2]);          digitalWrite(bin4, Bin[a][3]);          delay(d);     }   }
Leia mais
Imagem
  Servo Display HT16K33 #include "Adafruit_LEDBackpack.h" Adafruit_7segment led_display1 = Adafruit_7segment (); #include <Servo.h> int pos = 0 ; Servo servo ; void setup () {   servo . attach ( 9 , 500 , 2500 );   led_display1 . begin ( 112 ); } void loop () {     for ( pos = 0 ; pos <= 180 ; pos += 1 ) {         servo . write ( pos );         led_display1 . println ( pos );     led_display1 . writeDisplay ();         delay ( 500 );   }   for ( pos = 180 ; pos >= 0 ; pos -= 1 ) {         servo . write ( pos );         led_display1 . println ( pos );     led_display1 . writeDisplay ();         delay ( 500 );   } }
Leia mais

Joystick, Servos e Laser

Imagem
[code] #include "HCPCA9685.h"  #define I2CAdd 0x40  #define eixoX A0  #define eixoY A1  #define botao 4  int PosicaoServo0; int PosicaoServo1; HCPCA9685 HCPCA9685(I2CAdd);  void setup()  { HCPCA9685.Init(SERVO_MODE);  HCPCA9685.Sleep(false);  PosicaoServo0=250; PosicaoServo1=250; HCPCA9685.Servo(0, PosicaoServo0);   HCPCA9685.Servo(1, PosicaoServo1);  pinMode(botao, INPUT_PULLUP); } void loop()  { if (!digitalRead(botao)) { delay(500); PosicaoServo0=250; PosicaoServo1=250; HCPCA9685.Servo(0, PosicaoServo0);   HCPCA9685.Servo(1, PosicaoServo1);  } if (analogRead(eixoX) > 800) { if (PosicaoServo0 < 420) {  PosicaoServo0++;  }  delay(10); HCPCA9685.Servo(0, PosicaoServo0); } if (analogRead(eixoX) < 300) { if (PosicaoServo0 > 10) { PosicaoServo0--; } delay(10);  HCPCA9685.Servo(0, PosicaoServo0);  }  ...
Leia mais