Question

我得到的错误似乎是语法上的。我已经在这方面工作了10多天，并且让它按照我想要的方式运行。但是，我想要的（理想情况下）就是拥有它，以便当一个元素被mousedOver时，函数然后在另一个元素上启动图像翻转。例如。第1,2,3点。 mouseOver point1在点1,2或3的随机选择中启动翻转。例如，鼠标可能位于'demo1'但在'demo3'处启动翻转。希望这是有道理的。编辑：发现此页面具有类似的效果，除了更改背景而不是其他元素（例如，mouseOver square会导致圆圈上的颜色/图像更改）https://processing.org/examples/rollover.html

第一个示例返回getElementById（..）null，我认为这意味着尚未定义指向的变量（因为在加载所有元素之前无法定义它）。但如果它有效，它还会提供我希望的效果吗？

<head>
<script>
//preload
window.onload = function(){
var pixel= ("black.png")
inames= ["black1.jpg", "black2.jpeg", "black3.jpg", "black4.jpg",    "black5.jpg", "black6.jpg", "black7.jpg", "black8.jpg", "black9.jpg", "black10.jpg", "black11.jpg", "black12.jpg", ,"black.png", "black13.jpg", "black14.jpg", "black15.jpg", "black16.jpg", "black17.jpg", "black18.jpg", "black19.jpg", "black20.jpg", "black21.jpg", "black22.jpg", "black23.jpg", "black.png", "black24.jpg", "black25.jpg", "black26.jpg", "black27.jpg", "black28.jpg", "black29.jpg", "black30.jpg", "black31.jpg", "black32.jpg", "black33.jpg", "black34.jpg", "black35.jpg", "black36.jpg", "black37.jpg", "black38.jpg", "black39.jpg", "black40.jpg", "black41.jpg", "black.png", "black42.jpeg", "black43.jpg", "black44.jpg", "black45.jpg", "black46.jpg", "black47.jpg", "black48.jpg", "black49.jpg", "black50.jpg", "black51.jpg", "black52.jpg", "black53.jpg", "black54.jpg", "black55.jpg", "black56.jpg", "black57.jpg", "black58.jpg"]
var selected
var myImage
var selImage
points= ["demo", "demo1", "demo2", "demo3"]
var pointed

//do not delete
document.getElementById(pointed).onmouseover = function() {mouseOver()};
document.getElementById(pointed).onmouseout = function() {mouseOut()};
document.getElementById(pointed).onmouseover = function() {mouseOver1()};
document.getElementById(pointed).onmouseout = function() {mouseOut1()};
document.getElementById(pointed).onmouseover = function() {mouseOver2()};
document.getElementById(pointed).onmouseout = function() {mouseOut2()};
document.getElementById(pointed).onmouseover = function() {mouseOver3()};
document.getElementById(pointed).onmouseout = function() {mouseOut3()};
//Random Image
function randomPick(arr) {
  var selected = arr[Math.floor(Math.random()*inames.length - 1)]
  return selected;
}
//Random Element
function randomPoint(arr) {
    var pointed = arr[Math.floor(Math.random()*points.length + 1)]
  return pointed;
}
//DEMO -> working
function mouseOver() {
    var myImage = document.getElementById(pointed);
    var selImage = randomPick(inames);
    myImage.src = "media/" + selImage;
}
//DEMO -> working
function mouseOut() {
    var myImage = document.getElementById(pointed);
    myImage.src = "media/black.png";
}
//DEMO1 -> working
function mouseOver1() {
    var myImage = document.getElementById(pointed);
    var selImage = randomPick(inames);
    myImage.src = "media/" + selImage;
}
//DEMO1 -> working
function mouseOut1() {
    var myImage = document.getElementById(pointed);
    myImage.src = "media/black.png";
}
//DEMO2 -> working
function mouseOver2() {
    var myImage = document.getElementById(pointed);
    var selImage = randomPick(inames);
    myImage.src = "media/" + selImage;
}
//DEMO2 -> working
function mouseOut2() {
    var myImage = document.getElementById(pointed);
    myImage.src = "media/black.png";
}
//DEMO3 -> working
function mouseOver3() {
    var myImage = document.getElementById(pointed);
    var selImage = randomPick(inames);
    myImage.src = "media/" + selImage;
}
//DEMO3 -> working
function mouseOut3() {
    var myImage = document.getElementById(pointed);
    myImage.src = "media/black.png";
}
}
</script>
  </head>
  <body>

<image id="demo1" src="media/black.png" style="position:absolute; top:250px; left:500px; height:auto; width:auto;" onMouseOver=mouseOver1() onmouseOut=mouseOut1() alt="image2">

<image id="demo2" src="media/black.png" style="position:absolute; top:95px; left:50px; height:auto; width:auto;" onMouseOver=mouseOver2() onmouseOut=mouseOut2() alt="image3">

<image id="demo3" src="media/black.png" style="position:absolute; top:500px; left:10px; height:auto; width:auto;" onMouseOver=mouseOver3() onmouseOut=mouseOut3() alt="image4">
</body>

第二个例子是我所拥有的相当大的片段，我一直试图修改以添加随机化。再一次，这是我第一次真正努力编写任何东西，但我一直在努力 - 我不会问我是否能找到自己如何做。任何帮助都感激不尽。我正在寻找一种更优雅的解决方案来创造我想要的效果，但是由于时间的限制，我们决定这样做但是有效。

<head>
<script type="text/javascript">
//preload
window.onload = function(){
var pixel= ("black.png")
inames= ["black1.jpg", "black2.jpeg", "black3.jpg", "black4.jpg", "black5.jpg", "black6.jpg", "black7.jpg", "black8.jpg", "black9.jpg", "black10.jpg", "black11.jpg", "black12.jpg", ,"black.png", "black13.jpg", "black14.jpg", "black15.jpg", "black16.jpg", "black17.jpg", "black18.jpg", "black19.jpg", "black20.jpg", "black21.jpg", "black22.jpg", "black23.jpg", "black.png", "black24.jpg", "black25.jpg", "black26.jpg", "black27.jpg", "black28.jpg", "black29.jpg", "black30.jpg", "black31.jpg", "black32.jpg", "black33.jpg", "black34.jpg", "black35.jpg", "black36.jpg", "black37.jpg", "black38.jpg", "black39.jpg", "black40.jpg", "black41.jpg", "black.png", "black42.jpeg", "black43.jpg", "black44.jpg", "black45.jpg", "black46.jpg", "black47.jpg", "black48.jpg", "black49.jpg", "black50.jpg", "black51.jpg", "black52.jpg", "black53.jpg", "black54.jpg", "black55.jpg", "black56.jpg", "black57.jpg", "black58.jpg"]
var selected
var myImage
var selImage

//do not delete
document.getElementById("demo").onmouseover = function() {mouseOver()};
document.getElementById("demo").onmouseout = function() {mouseOut()};
document.getElementById("demo1").onmouseover = function() {mouseOver1()};
document.getElementById("demo1").onmouseout = function() {mouseOut1()};
document.getElementById("demo2").onmouseover = function() {mouseOver2()};
document.getElementById("demo2").onmouseout = function() {mouseOut2()};
document.getElementById("demo3").onmouseover = function() {mouseOver3()};
document.getElementById("demo3").onmouseout = function() {mouseOut3()};

//Random Image
    function randomPick(arr) {
      var selected = arr[Math.floor(Math.random()*inames.length + 1)]
      return selected;
    }
//DEMO -> working
    function mouseOver() {
        var myImage = document.getElementById(pointed);
        var selImage = randomPick(inames);
        myImage.src = "media/" + selImage;
}
//DEMO -> working
    function mouseOut() {
        var myImage = document.getElementById(pointed);
        myImage.src = "media/black.png";
    }
//DEMO1 -> working
    function mouseOver1() {
        var myImage = document.getElementById("demo1");
        var selImage = randomPick(inames);
        myImage.src = "media/" + selImage;
}
//DEMO1 -> working
    function mouseOut1() {
        var myImage = document.getElementById("demo1");
    myImage.src = "media/black.png";
}
//DEMO2 -> working
    function mouseOver2() {
        var myImage = document.getElementById("demo2");
        var selImage = randomPick(inames);
        myImage.src = "media/" + selImage;
    }
//DEMO2 -> working
    function mouseOut2() {
    var myImage = document.getElementById("demo2");
    myImage.src = "media/black.png";
}
//DEMO3 -> working
    function mouseOver3() {
    var myImage = document.getElementById("demo3");
        var selImage = randomPick(inames);
        myImage.src = "media/" + selImage;
}
//DEMO3 -> working
    function mouseOut3() {
        var myImage = document.getElementById("demo3");
    myImage.src = "media/black.png";
}
</script>
</head>
<body>
<image id="demo" src="media/black.png" style="position:absolute; top:35px; left:200px; height:auto; width:auto;" onMouseOver=mouseOver()  onmouseOut=mouseOut() alt="image1">

<image id="demo1" src="media/black.png" style="position:absolute; top:250px; left:500px; height:auto; width:auto;" onMouseOver=mouseOver1() onmouseOut=mouseOut1() alt="image2">

<image id="demo2" src="media/black.png" style="position:absolute; top:95px; left:50px; height:auto; width:auto;" onMouseOver=mouseOver2() onmouseOut=mouseOut2() alt="image3">

<image id="demo3" src="media/black.png" style="position:absolute; top:500px; left:10px; height:auto; width:auto;" onMouseOver=mouseOver3() onmouseOut=mouseOut3() alt="image4">
</body>

Answer 1

让所有项目调用新功能。在新函数中，生成1到3之间的随机数。现在检查该值。如果值为1，则调用第一个函数。如果是2，请拨打第二个。等等。

function mouseOverAny(){

  var numberBetweenOneAndThree = (Math.random()*2)+1;
  switch(expression) {
    case 1:
      mouseOver1();
      break;
    case 2:
      mouseOver2();
      break;
    case 3:
      mouseOver3();
      break;
  }

}

...

<image id="demo1" src="media/black.png" style="position:absolute; top:250px; left:500px; height:auto; width:auto;" onMouseOver=mouseOverAny() onmouseOut=mouseOut1() alt="image2">

Mouseover从元素数组中启动随机翻转

1 个答案: