Question

您可能知道，我对HTML和JS非常陌生。我点击它时试图让图像移动，但由于某种原因它不起作用。有人可以看看吗？

（这是我学习Javascript的第一天！请记住这一点）
的Javascript

    var main = function() {
      $('document.Image').click(function() {
        $(this).animate({
          left: "100px"
        }, 200);
    });

};

HTML

<html>
<head>
<title>JS Test</title>
</head>
<body>
<img height="25px" width="25px" src="https://webdesignfromscratch.com/snippets/html-css-javascript.gif">
<script type="text/javascript" src="app.js"></script>
</body>
</html>

Answer 1

您需要调用/调用main函数
documemt.Image是无效的选择器。将类.image提供给可以使用$('.image')
要在left中应用.animate() css属性，元素必须位于absolute/relative/fixed。查看更新的css

var main = function() {
  $('.image').click(function() {
    $(this).animate({
      left: "100px"
    }, 200);
  });
};
main();

.image {
  position: absolute;
  left: 200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<img class='image' height="25px" width="25px" src="https://webdesignfromscratch.com/snippets/html-css-javascript.gif">

Answer 2

你的代码中有多个错误......这是代码。

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('img').click(function(){
$(this).animate({'margin-left': "300px"})
});
});
</script>
</head>
<body>
<img style='margin-left:100px' src='' alt='no image' />
</body>
</html>

我相信它有助于你...

Javascript没有做到这一点

2 个答案: