Javascript没有这么做'的工作

Javascript not doing it's job

本文关键字：工作 Javascript      更新时间：2023-09-26

正如您所知，我对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>
  • 您需要调用/调用main函数
  • documemt.Image是无效的选择器。将类作为.image赋予可以使用$('.image')选择的元素
  • 若要在.animate()中应用left 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">

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

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

我相信这对你有帮助…

相关文章：