當我點擊其他html元素時，如何使對角移動圖像？

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

來源

2016-03-22 jose Moreira

雖然這個問題看起來不錯，我很樂意幫助，但它缺少一些信息和格式來幫助您回答！

嘗試解決這些事情：

格式代碼很好用的旁有用的代碼按鈕，工具欄上的圖像按鈕！
提供你的HTML，記得我看不到你的屏幕（不幸），所以如果我有你的HTML，這將是非常有用的，所以我知道你想要移動什麼被點擊！
在您提問之前使用Google搜索！雖然我很樂意幫助，但我覺得Google可能是一種非常快速的方式來獲得這個答案！

例如：（只是谷歌上搜索30秒），我發現： https://stackoverflow.com/a/2532509/5868718 +1尼克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>

我沒有jQuery的大師，但我想你大概可以鏈接上述功能最多監聽像這樣的點擊另一個功能！

$("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>

來看看吧！看起來不錯！我希望這有助於！

歡迎光臨社區:)

來源

2016-03-22 12:40:53 Rob

當我點擊其他html元素時，如何使對角移動圖像？

回答

相關問題