javascript - 鼠标悬停会启动元素数组的随机翻转

标签 javascript arrays random getelementbyid rollover

我得到的错误似乎是语法错误。我已经为此工作了 10 多天，并且几乎按照我想要的方式运行。然而，我想要的(理想情况下)是拥有它，以便当一个元素被鼠标悬停在该函数上时，然后在另一个元素上启动图像翻转。例如。点 1、2、3。 mouseOver point1 在从点 1,2 或 3 中随机选择的位置启动翻转。因此，例如鼠标可能位于“demo1”，但在“demo3”处启动翻转。希望这是有道理的。 编辑:发现此页面具有类似的效果，除了更改背景而不是其他元素(例如，鼠标悬停在正方形上会导致圆形上的颜色/图像发生变化)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>

最佳答案

使所有项目都调用一个新函数。在新函数中，生成 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">

关于javascript - 鼠标悬停会启动元素数组的随机翻转，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36901835/

上一篇：javascript - Google 在 ASP.Net MVC 中部分页面加载后设置自动完成功能不起作用

下一篇：javascript - 闭包的返回值未定义

相关文章：

javascript - JavaScript 中的路径映射？

javascript - 获取数据后 javascript 将停止工作

arrays - 数组上的 Lua 展开运算符

c++ - 使用动态内存分配

php - 将 rand() 用于 CSRF，是否安全 (r)？

algorithm - 具有均匀分布的随机可变长度编码数字

javascript - 如何以编程方式向下滚动页面？

javascript - jQuery - 翻转 DIV 问题

Javascript/Angular 在声明数组之前对其进行切片

c++ - rand() 给出序列号，即使在我的 Mac 上播种时也是如此

©2024 IT工具网  联系我们