Fatal编程技术网
  • javascript/
  • Javascript 如何使用单选按钮将图像移动到屏幕中的不同位置？

Javascript 如何使用单选按钮将图像移动到屏幕中的不同位置？

javascript html css

Javascript 如何使用单选按钮将图像移动到屏幕中的不同位置？,javascript,html,css,Javascript,Html,Css,这就是我到目前为止所做的，我的想法是选择一个选项，然后为每个选项建立一个函数，西北、东北、西南和东南，当它们被选中时调用它们，这将把图片移动到不同的位置。我不知道还有什么可以尝试，我试着在网上寻找一些类似的例子，但我没有任何帮助 感谢您的帮助 编辑：我根本无法移动图像，这就是我遇到的问题。这里有一个JSFIDLE供您查看： 希望这有助于： //What button was placed function positionChoice (choice) { var dom = documen

这就是我到目前为止所做的，我的想法是选择一个选项，然后为每个选项建立一个函数，西北、东北、西南和东南，当它们被选中时调用它们，这将把图片移动到不同的位置。我不知道还有什么可以尝试，我试着在网上寻找一些类似的例子，但我没有任何帮助

感谢您的帮助

编辑：我根本无法移动图像，这就是我遇到的问题。

这里有一个JSFIDLE供您查看： 希望这有助于：

//What button was placed
function positionChoice (choice) {
  var dom = document.getElementById("myForm");

// Determine which button was pressed

  for (var index = 0; index < dom.choice.length;
       index++) {
    if (dom.choice[index].checked) {
      choice = dom.choice[index].value;
      break;
  }
}



switch (choice) {
  case "Northwest":
  moveItNorthwest();
    break;
  case "Northeast":
  moveItNortheast();
    break;
  case "Southeast":
  moveItSoutheast();
    break;
  case "Southwest":
  moveItSouthwest();
    break;
  default:
    alert("Error in JavaScript function choice");
    break;
}
}

//To move picture to specified place
function moveItNortheast(movee, newTop, newLeft) {

  dom = document.getElementById().style;
if()

  dom.top = 1200px;
  dom.left = 10px;
}

function moveItNorthwest(movee, newTop, newLeft) {

  dom = document.getElementById(movee).style;
if()

  dom.top = 100px;
  dom.left = 100px;
}

function moveItSoutheast(movee, newTop, newLeft) {

  dom = document.getElementById(movee).style;
if()

  dom.top = 1200;
  dom.left = 80px;
}

function moveItSouthwest(movee, newTop, newLeft) {

  dom = document.getElementById(movee).style;
if()

  dom.top = 80px;
  dom.left = 1200px;
}
我写了一个函数移动，你将新的命令传递给它，而不是基本上写了4次相同的代码，同样，你没有告诉usSorry，我忘了说我根本不能移动我的图片。我可以选择单选按钮，但没有发生任何事情。你可以发布你的HTML吗？请：我刚刚添加了HTML供将来参考。编辑HTML到你的问题：，我现在已经对我的answear进行了编辑，希望它有所帮助。你不应该将函数名的第一个字母大写。 
OnStart();
function OnStart() {
    console.log('Entered OnStart');

  var rad = document.querySelectorAll('input');
  var prev = null;

  console.log(rad);

  for (var i = 0; i < rad.length; i++) {
     console.log('Adding event listeners');
      rad[i].addEventListener('change', function() {
       (prev) ? console.log(prev.value): null;
        if (this !== prev) {
            prev = this;
            console.log(this.value);
            PositionChoice(this.value);
        }
      });
  }

};

//What button was placed
function PositionChoice(_index) {
    console.log('Entered positionChoice: ' + _index);

 /*var myForm = document.getElementById('myForm');

// Determine which button was pressed
for (var index = 0; index < myForm.choice.length; index ++) {
  if (myForm.choice[index].checked) {
   choice = myForm.choice[index].value;
   break;
 }
}*/

 switch (_index) {
  case 'Northwest':
   Move('100px', '10px');
  break;
 case 'Northeast':
  Move('120px', '20px');
 break;
 case 'Southeast':
  Move('150px', '30px');
 break;
 case 'Southwest':
  Move('160px', '40px');
 break;
 default:
  alert("Error in JavaScript function choice");
 break;
 }
};

//To move picture to specified place
function Move(_newTop, _newLeft) {
    console.log('Entered Move: ' + _newTop + ' ' + _newLeft);

  myPic = document.getElementById('cloudpic').style;

  myPic.top = _newTop;
  myPic.left = _newLeft;
};

<!DOCTYPE html>
<html lang = "en">
  <head>
    <title> Question 1 </title>
    <meta charset = "utf-8" />
    <style type = "text/css">
      .container1{
        position:relative;
        display: inline-block;
      }

      .text-pgh{
        position:absolute;
        color:black;
        bottom:20px;
        right:20px;
        padding-left:20px;
        padding-right:20px;
      }

      #cloudpic{
        position: relative;

        top: 0px;
        left: 0px;

         pointer-events: none;

        opacity: 0.2;
      }

    </style>
  </head>

  <body>
     <div class="container1">
      <img id="cloudpic" src="https://picsum.photos/200/300" alt="Cloud 9 picture">

     <div class="text-pgh">
     <p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
  do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </p>
    </div>
        </div>


    <form id="myForm">
        <input type="radio" id="radio1" value= "Northwest" name="positions"/>Northwest<br>
        <input type="radio" id="radio2" value= "Northeast" name="positions"/>Northeast<br>
        <input type="radio" id="radio3" value= "Southeast" name="positions"/>Southeast<br>
        <input type="radio" id="radio4" value= "Southwest" name="positions"/>Southwest<br>
    </form>

  </body>
</html>