Diğer bir html öğesine tıkladığımda bir görüntüyü nasıl çapraz olarak hareket ettirebilirim?

-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>

kaynak

2016-03-22 jose Moreira

Bu soru harika görünüyor ve yardım etmeyi çok isterim, cevap vermenize yardımcı olacak bir miktar bilgi ve format içermiyor!

bunları düzeltmeyi deneyin:

Biçim kodunuzu güzel araç çubuğunda resim düğmesinin yanındaki yararlı kod düğmesini kullanarak!
HTML'nizi sağlayın, ekranınızı göremediğimi hatırlıyorum (maalesef), böylece HTML'niz olduğunda gerçekten ne kadar yararlı olur, böylece ne yapmaya çalıştığınızı ve ne tıklandığınızı biliyorum!
Sormadan önce sayfayı kontrol edin! Yardım etmekten mutlu olmamıza rağmen, Google'ın bunu yanıtlamanın gerçekten hızlı bir yolu olabileceğini düşünüyorum.

Örnek (googling sadece 30 saniye) için buldum: Nick Craver için https://stackoverflow.com/a/2532509/5868718 1! :)

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>

Ben jQuery Guru değilim ama böyle bir tıklama için dinler başka işleve yukarıdaki işlevini bağlantı muhtemelen düşünüyorum!

$("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 !! Oldukça iyi görünüyor! Umarım bu yardımcı olur!

Topluluğa hoşgeldiniz :)

kaynak

2016-03-22 12:40:53 Rob

Diğer bir html öğesine tıkladığımda bir görüntüyü nasıl çapraz olarak hareket ettirebilirim?

cevap

İlgili konular