Question

您好我正在为学校开展计算项目。我需要让我的拖动jQuery框与我的交通信号灯交互（我的交通信号灯在一个周期）当盒子接触我需要交通灯循环开始时，这可能吗？任何帮助将不胜感激，

到目前为止，这是我的代码;

 <!DOCTYPE html>
<html>
  <head>
 <script type="text/javascript">
var lights = ["red.png", "yellow.png", "green.png"]
var lightscentre = 0
var timer

function ChangeImage() {
clearTimeout(timer)
 if (++lightscentre == lights.length)
   lightscentre = 0

  document.images[0].src = lights[lightscentre]

   timer = setTimeout(LightCycle, 1000)
}
function LightCycle() {
 clearTimeout(timer)
 if (++lightscentre == lights.length)
 lightscentre = 0

  document.images[0].src = lights[lightscentre]

  timer = setTimeout(LightCycle, 1000)
}
function stopCycle() {
clearTimeout(timer)
}

</script>
</head>
<body>
<img src="red.png" name="nt1" width="130" height="175" alt="123">

   <form>
<input type="button" value="Go" name="Go" onclick="ChangeImage()">
  <input type="button" value="Stop" name="Stop" onclick="stopCycle()">
    </form>

 <head>

<style>
#makeMeDraggable { width: 100px; height: 100px; background: red; }
</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>

<script type="text/javascript">

$( init );

function init() {
  $('#makeMeDraggable').draggable();
}

</script>

</head>
<body>

<div id="content" style="height: 400px;">
  <div id="makeMeDraggable"> </div>
</div>


</body>
</html>

Answer 1

你可以在Jquery中为动画（？）或你计划的事情做这个功能。否则，您可以在JS中转换Jquery变量以在函数中使用它们。最好的方法是接受任何GET / POST并在Jquery中执行这些操作并在JS中执行其他所有操作，或者执行数据获取部分。

另外，祝你的项目好运。请随意在@ ev1stensberg（twitter）上与我联系并聊聊。

<!DOCTYPE html>
    <html>
      <head>
     <script type="text/javascript">
    var lights = ["red.png", "yellow.png", "green.png"]
    var lightsCentre = 0;
    var timer = setInterval(function {
      window.location.reload()
    }, 3000);

    var turnOnTheLights = function(e) {
      e.preventDefaults();

    switch(lights) {
      case (document.getElementbyId('redLights').onClick == true) :
        return lights[0]

      setTimeout(function() {
        console.log("hello"),

      }, 3000);

      case(document.getElementbyId('redLights').onClick == true &&
      return lights[0] == true) :

        return lights[1].
        setTimeout(function() {
          console.log("I'm a terrible programmer");
        }, 3000)

        case(document.getElementbyId('redLights').onClick == true &&
        return lights[1] == true) :
        return clearInterval(timer)

        break;

        default: window.location.reload();

    }
return lights;
  }
var turnOffTheLights = function(e) {
e.preventDefaults();
  return window.setTimeout(function() {
    console.log("Heyho"), 3000
  });

}
    </script>
    </head>
    <body>
    <img src="red.png" id ="redLights" name="nt1" width="130" height="175" alt="123">

       <form>
    <input type="button" value="Go" name="Go" onclick="turnOnTheLights()">
      <input type="button" value="Stop" name="Stop" onclick="turnOffTheLights()">
        </form>

     <head>

    <style>
    #makeMeDraggable { width: 100px; height: 100px; background: red; }
    </style>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>

    <script type="text/javascript">

    $( init );

    function init() {
      $('#makeMeDraggable').draggable();
    }

    </script>

    </head>
    <body>

    <div id="content" style="height: 400px;">
      <div id="makeMeDraggable"> </div>
    </div>


    </body>
    </html>

Answer 2

您可以使用拖动事件：

function init() {
  var $light = $('img');
  var $draggable = $('#makeMeDraggable').draggable({
    drag: function( event, ui ) {
      var light_offset = $light.offset();
      if (ui.offset.left < light_offset.left+$light.width() &&
          ui.offset.left + $draggable.width() > light_offset.left &&
          ui.offset.top + $draggable.height() > light_offset.top &&
          ui.offset.top < light_offset.top+$light.height()) {
          if (!timer) {
            LightCycle();
          }
      } else {
        clearTimeout(timer);
        timer = null;
      }
    }
  });
}

JSFIDDLE

如何让JavaScript与Jquery交互？

2 个答案: