Question

我正在尝试根据变量的值更改箭头的颜色。在div.f中，我试图在两个不同的图像文件之间进行更改以实现此目的。你可以在第一个var newq = temp（）中看到逻辑;打电话给代码的底部。我确信这只是一个语法错误，但我无法弄明白。

//window.$ = window.jQuery = require('jquery');

$(document).ready(function() {
  animateDiv();

});

function blooddias() {
  var min = 245.5;
  var max = 260;
  var nw = 915;
  var nh = Math.floor(Math.random() * (max - min + 1)) + min;
  return [nh, nw];
}

function bloodsyst() {
  var min = 255.5;
  var max = 269;
  var nw = 777;
  var nh = Math.floor(Math.random() * (max - min + 1)) + min;
  return [nh, nw];
}

function cellrate() {
  var min = 255.5;
  var max = 269;
  var nw = 640;
  var nh = Math.floor(Math.random() * (max - min + 1)) + min;
  return [nh, nw];
}

function lungs() {
  var min = 255.5;
  var max = 269;
  var nw = 355;
  var nh = Math.floor(Math.random() * (max - min + 1)) + min;
  return [nh, nw];
}

function brain() {
  var min = 255.5;
  var max = 269;
  var nw = 225;
  var nh = Math.floor(Math.random() * (max - min + 1)) + min;
  return [nh, nw];
}

function temp() {
  var min = 185;
  var max = 219;
  //var nh = 200;
  var nw = 85;
  var nh = Math.floor(Math.random() * (max - min + 1)) + min;
  return [nh, nw];
}

function animateDiv() {

  var newq = blooddias();
  $('.a').animate({
    top: newq[0],
    left: newq[1]
  }, function() {
    animateDiv();
  });
  var newq = bloodsyst();
  $('.b').animate({
    top: newq[0],
    left: newq[1]
  }, function() {
    animateDiv();
  });
  var newq = cellrate();
  $('.c').animate({
    top: newq[0],
    left: newq[1]
  }, function() {
    animateDiv();
  });
  var newq = lungs();
  $('.d').animate({
    top: newq[0],
    left: newq[1]
  }, function() {
    animateDiv();
  });
  var newq = brain();
  $('.e').animate({
    top: newq[0],
    left: newq[1]
  }, function() {
    animateDiv();
  });
  var newq = temp();
  if (newq[0] > 200) {
    document.getElementById("demo").innerHTML = "redarrow";
  } else {
    document.getElementById("demo").innerHTML = "orangearrow";
  }

  var newq = temp();
  $('.f').animate({
    top: newq[0],
    left: newq[1]
  }, function() {
    animateDiv();
  });
};

div.a {
  width: 50px;
  height: 50px;
  background-image: url("greenarrow.png");
  position: fixed;
}

div.b {
  width: 50px;
  height: 50px;
  background-image: url("greenarrow.png");
  position: fixed;
}

div.c {
  width: 50px;
  height: 50px;
  background-image: url("greenarrow.png");
  position: fixed;
}

div.d {
  width: 50px;
  height: 50px;
  background-image: url("greenarrow.png");
  position: fixed;
}

div.e {
  width: 50px;
  height: 50px;
  background-image: url("greenarrow.png");
  position: fixed;
}

div.f {
  width: 50px;
  height: 50px;
  background-image: url("id=demo.png");
  position: fixed;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.5/require.js"></script>

<body background="startrekbg.png">

  <div class='a'></div>
  <div class='b'></div>
  <div class='c'></div>
  <div class='d'></div>
  <div class='e'></div>
  <div class='f'></div>
<div id="demo"></div>
</body>

Answer 1

而不是试图操纵HTML路径。决定看看我是否可以使HTML不可见。幸运的是，有一个名为＆＃34; opacity＆＃34;的JavaScript功能。允许您在不需要时隐藏图像。如下所示：
var newq = temp（）;

if(newq[0]<200){  //border between organge and red
var c = 0;
var t = 100;
}else{
var t = 0;
var c = 100;
     }
$('.f').animate({ top: newq[0], left: newq[1], opacity:c },
function(){
});
$('.g').animate({ top: newq[0], left: newq[1], opacity:t }, 
function(){
animateDiv();//Recursive call
});

在div中切换图像。使用javascript background-image：url（id =“demo”）;

1 个答案: