Wie kann ich ein Bild diagonal bewegen, wenn ich auf ein anderes HTML-Element klicke?

-5

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="UTF-9"> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
    <script> 
     $(function() { 
      $(document).ready(function(){ 
       $("#btn3").hide(0); 
       $("#carne").hide(0); 
       $("#alfacePicada").hide(0); 
       $("#EspetadasFrango").hide(0); 
       $("#lasanha").hide(0); 
       $("#gelado").hide(0); 
      }); 
     }); 

     $(function() { 
      $(document).ready(function(){ 
       $("#ovo").click(function(event){ 
        $(this).animate({right: '+=200', bottom: '+=300'}, 1000); 
       }); 
      }); 
     }); 
    </script> 
</head> 
<body> 
    <div class="recortesredondos1"> 
     <div class="recortesredondos2"> 
      <h3>Regulamento 2073/2005 Módulo 1: Identificação de Critérios Aplicáveis</h3> 
      <p id="menu">Menu</p><p id="recursos">Recursos</p> 
      <p id="glossario">Glossário</p> 
     </div> 
     <h2><center>Estado de Alimentos Prontos Para Consumo<center></h2> 
     <div id="botoes"> 
      <input type="submit" id="btn3" value="Submeter"> 
     </div> 
     <img src="ovo2.gif" id="ovo" name="qq1" style="width:100px;height:100px; margin-left: 600px; margin-bottom:100px; margin-top: 100px z-index:4;"> 
     <img src="alfacepicada2.gif" id="alfacePicada" name="qq2" style="width:100px;height:100px; margin-left: 600px; margin-top:-65px; z-index:6;"> 
     <img src="carne2.gif" id="carne" name="qq3" style="width:100px;height:100px; margin-left: 600px; margin-top:-65px; z-index:7;"> 
     <img src="gelado2.gif" id="gelado" name="qq4" style="width:100px;height:100px; margin-left: 600px; margin-top:-65px; z-index:8;"> 
     <img src="galinha2.gif" id="EspetadasFrango" name="qq5" style="width:100px;height:100px; margin-left: 600px; margin-top:-65px; z-index:9;"> 
     <img src="lasanha2.gif" id="lasanha" name="qq6" style="width:100px;height:100px; margin-left: 600px; margin-top:-65px; z-index:10;"> 
     <div ="clique"> 
      <p id="linha1">---------------------------------</p> 
     </div> 

     <button type="submit" id="btn2" value="Submeter">RTE</button> 
    </div> 
</html>

Quelle

2016-03-22 jose Moreira

Während diese Frage gut aussieht und ich würde gerne helfen, es fehlt ein bisschen Informationen und Format, um Ihnen zu beantworten!

Versuchen Sie, diese Dinge Festsetzung:

Format Code schön die hilfreiche Code-Taste neben dem Bild Taste in der Symbolleiste!
Geben Sie Ihren HTML-Code ein, denken Sie daran, dass ich Ihren Bildschirm nicht sehen kann (leider), daher wäre es sehr hilfreich, wenn ich HTML hätte, damit ich weiß, was Sie versuchen zu bewegen und worauf geklickt wird!
Googeln, bevor Sie fragen! Obwohl ich glücklich bin zu helfen, fühle ich mich wie Google könnte ein sehr schneller Weg, um diese beantwortet zu bekommen!

Beispiel (nur 30 Sekunden googeln) gefunden: https://stackoverflow.com/a/2532509/5868718 +1 zu Nick Craver! :)

function myAnimate() { 
 
$("#div").animate({left: '+=100', top: '+=100'}, 1000); 
 
}

<div id="div" style="width: 100px; height: 100px; border: solid 1px red; position: relative;">Test</div>

Ich bin kein jQuery Guru, aber ich denke, Sie wahrscheinlich die obige Funktion auf eine andere Funktion oben in Verbindung bringen könnte, die für einen Klick wie diese hört!

$("button").click(function() { 
 
    $("#div").animate({ 
 
    left: '+=150', 
 
    top: '+=150' 
 
    }, 1000); 
 
})

button { 
 
    position: relative; 
 
    left: 150px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="div" style="width: 100px; height: 100px; border: solid 1px red; position: relative;"> </div> 
 

 
    <button type="button" id="myButton"> 
 
    Hi there! 
 
    </button>

Check it out !! sieht sehr gut aus! Ich hoffe das hilft!

Willkommen in der Gemeinschaft :)

Quelle

2016-03-22 12:40:53 Rob

Wie kann ich ein Bild diagonal bewegen, wenn ich auf ein anderes HTML-Element klicke?

Antwort

Verwandte Themen