鼠标悬停从元素数组启动随机翻转
Mouseover initiates random rollover from array of elements
我得到的错误似乎是语法上的。我已经为此工作了 10 多天，并且它几乎按照我想要的方式运行。但是，我想要的（理想情况下）是拥有它，以便当将鼠标悬停在函数上时，然后在不同的元素上启动图像滚动更新。例如。要点 1、2、3。鼠标悬停在点 1 上 从点 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">
相关文章：
- 我的jQuery插件参数没有正确启动，遇到了问题
- chrome扩展:尽管运行了at:documentidle，js脚本还是过早启动
- 从控制器返回后Ajax启动事件激发
- Meteor上的启动页面
- 如何防止网页加载后自动启动功能
- 如何从JavaScriptInterface启动Navigation Drawer
- $(document）.height(）在刷新时随机化值(Safari 5.1.10）
- 使用当前日期生成随机id
- window.on.scroll事件未启动
- 单击按钮后启动javascript提示
- 从a-z中随机选择一个字母
- 在javaservlet doPost方法中启动线程时，无法返回异常消息
- spine.js在启动时填充模型实例
- 如何在所有ng点击事件AngularJS上启动一个方法
- 鼠标悬停从元素数组启动随机翻转
- Javascript:包含随机(）启动
- 如果(随机）单词不存在，则完全重复/重新启动功能
- Maximage 2.0 - HTML5 视频随机启动
- 启动HTML5<音频>在随机位置
- 如何使铬扩展随机启动
