如何使图像变多次的onmouseover

我试图使图像变化多次，所以我用setInterval但它不会停止如何使图像变多次的onmouseover

HTML：

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <meta charset="utf-8"> 
 
    <title>Untitled Document</title> 
 
    </head> 
 
    <body> 
 
    <a href="https://www.google.com" target="_blank"> 
 
     <img onmouseover="setInterval(mouseOver,500)" onmouseout="mouseOut()" id="a" src="1.jpg" style="height: 45vh; width: 23vw;"> 
 
    </a> 
 
    <script> 
 
     function mouseOver() 
 
     { 
 
     element=document.getElementById("a") 
 
     if (element.src.match("pic_bulboff.jpg")) 
 
     { 
 
      document.getElementById("a").src="8.jpg"; 
 
     } 
 
     else if (element.src.match("8.jpg")) 
 
     { 
 
      document.getElementById("a").src="6.jpg"; 
 
     } 
 
     else 
 
     { 
 
      document.getElementById("a").src="1.jpg"; 
 
     } 
 
     } 
 
     function mouseOut() 
 
     { 
 
     document.getElementById("a").src="1.jpg"; 
 
     } 
 
    </script> 
 
    </body> 
 
</html>

来源

2017-01-03 Joe Zak

你将必须清除使用'clearInterval（区间）'出来。然后将其设置为默认图像。 – karan3112

使用clearInterval和跟踪初始间隔：

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <title>Untitled Document</title> 
 
</head> 
 

 
<body> 
 
    <a href="https://www.google.com" target="_blank"> 
 
    <img onmouseover="init()" onmouseout="mouseOut()" id="a" src="http://placecage.com/400/400" style="height: 45vh; width: 23vw;"> 
 
    </a> 
 
    <script> 
 
    var interval; 
 

 
    function init() { 
 
     interval = setInterval(mouseOver, 500) 
 
    } 
 

 
    function mouseOver() { 
 
     element = document.getElementById("a") 
 
     if (element.src.match("400/400")) { 
 
     document.getElementById("a").src = "http://placecage.com/300/300"; 
 
     } else if (element.src.match("300/300")) { 
 
     document.getElementById("a").src = "http://placecage.com/200/200"; 
 
     } else { 
 
     document.getElementById("a").src = "http://placecage.com/500/500"; 
 
     } 
 
    } 
 

 
    function mouseOut() { 
 
     document.getElementById("a").src = "http://placecage.com/400/400"; 
 
     clearInterval(interval) 
 
    } 
 
    </script> 
 
</body> 
 

 
</html>

来源

2017-01-03 13:34:55 G0dsquad

你需要杀间隔：

var Int; 

function start(){ 
    Int=setInterval(yourfunc,1000); 
} 

function stop(){ 
    if(Int){ 
     clearInterval(Int); 
     Int=null; 
    } 
}

来源

2017-01-03 13:30:09

您应该清除停止旋转的时间间隔。为了解决这个问题，我建议调用一个外部函数（Lat的电话号码为onMouseOver）。

当用户输入时，将intervalId保存在另一个变量中。这样，当鼠标移出时，您可以拨打clearInterval。

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <meta charset="utf-8"> 
 
    <title>Untitled Document</title> 
 
    </head> 
 
    <body> 
 
    <a href="https://www.google.com" target="_blank"> 
 
     <img onmouseover="onMouseOver()" onmouseout="mouseOut()" id="a" src="1.jpg" style="height: 45vh; width: 23vw;"> 
 
    </a> 
 
    <script> 
 
     var interval; 
 
     function onMouseOver() { 
 
     interval = setInterval(mouseOver,500) 
 
     } 
 
     function mouseOver() 
 
     { 
 
     element=document.getElementById("a") 
 
     if (element.src.match("pic_bulboff.jpg")) 
 
     { 
 
      document.getElementById("a").src="8.jpg"; 
 
     } 
 
     else if (element.src.match("8.jpg")) 
 
     { 
 
      document.getElementById("a").src="6.jpg"; 
 
     } 
 
     else 
 
     { 
 
      document.getElementById("a").src="1.jpg"; 
 
     } 
 
     } 
 
     function mouseOut() 
 
     { 
 
     document.getElementById("a").src="1.jpg"; 
 
     clearInterval(interval); 
 
     } 
 
    </script> 
 
    </body> 
 
</html>

来源

2017-01-03 13:30:57

可以clearInterval的setInterval()的onmouseout。

做这样的事情。

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <title>Untitled Document</title> 
 
</head> 
 

 
<body> 
 
    <a href="https://www.google.com" target="_blank"> 
 
    <img onmouseover="mouseEntered()" onmouseout="mouseOut()" id="a" src="1.jpg" style="height: 45vh; width: 23vw;"> 
 
    </a> 
 
    <script> 
 
    var interval; 
 

 
    function mouseEntered() { 
 
     interval = setInterval(mouseOver, 500) 
 
    } 
 

 
    function mouseOver() { 
 
     element = document.getElementById("a") 
 
     if (element.src.match("pic_bulboff.jpg")) { 
 
     document.getElementById("a").src = "8.jpg"; 
 
     } else if (element.src.match("8.jpg")) { 
 
     document.getElementById("a").src = "6.jpg"; 
 
     } else { 
 
     document.getElementById("a").src = "1.jpg"; 
 
     } 
 
    } 
 

 
    function mouseOut() { 
 
     document.getElementById("a").src = "1.jpg"; 
 
     if(interval) 
 
     clearInterval(interval) 
 
    } 
 
    </script> 
 
</body> 
 

 
</html>

来源

2017-01-03 13:32:19

您需要使用clearInterval停止的setInterval。 clearInterval通过使用由setInterval返回的id来取消setInterval。

了解更多关于clearInterval这里。

https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/clearInterval

可以使用做到这一点。

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <title>Untitled Document</title> 
 
</head> 
 

 
<body> 
 
    <a href="https://www.google.com" target="_blank"> 
 
    <img onmouseover="mouseOver()" onmouseout="mouseOut()" id="a" src="1.jpg" style="height: 45vh; width: 23vw;"> 
 
    </a> 
 
    <script> 
 
    var timer; 
 

 
    function change() { 
 

 
     element = document.getElementById("a") 
 
     if (element.src.match("pic_bulboff.jpg")) { 
 
     document.getElementById("a").src = "8.jpg"; 
 
     } else if (element.src.match("8.jpg")) { 
 
     document.getElementById("a").src = "6.jpg"; 
 
     } else { 
 
     document.getElementById("a").src = "1.jpg"; 
 
     } 
 

 
    } 
 

 
    function mouseOver() { 
 
     timer = setInterval(change, 500) 
 
    } 
 

 
    function mouseOut() { 
 
     clearInterval(timer); 
 
     document.getElementById("a").src = "1.jpg"; 
 
    } 
 
    </script> 
 
</body> 
 

 
</html>

来源

2017-01-03 13:32:55 Deep

你必须使用clearInterval功能来清除setInterval的事件。这是一个例子。

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <title>Untitled Document</title> 
 
</head> 
 

 
<body> 
 
    <a href="https://www.google.com" target="_blank"> 
 
     <img onmouseover="setIntervalFunction()" onmouseout="mouseOut()" id="a" src="1.jpg" style="height: 45vh; width: 23vw;"> 
 
    </a> 
 
    <script> 
 
     var intervalVar = null; 
 
     function setIntervalFunction() { 
 
      intervalVar = setInterval(mouseOver,500);    
 
     } 
 
     function mouseOver() { 
 
      element = document.getElementById("a") 
 
      if (element.src.match("pic_bulboff.jpg")) { 
 
       document.getElementById("a").src = "8.jpg"; 
 
      } else if (element.src.match("8.jpg")) { 
 
       document.getElementById("a").src = "6.jpg"; 
 
      } else { 
 
       document.getElementById("a").src = "1.jpg"; 
 
      } 
 
     } 
 

 
     function mouseOut() { 
 
      document.getElementById("a").src = "1.jpg"; 
 
      clearInterval(intervalVar); 
 
     } 
 
    </script> 
 
</body> 
 

 
</html>

来源

2017-01-03 13:33:38 Nitheesh

必须使用setTimeout调用函数只有一次，因为setInterval将重复调用每ñ毫秒。同时先拨打即时电话，然后再拨打setTimeout一段时间后再次拨打电话。

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <title>Untitled Document</title> 
 
</head> 
 

 
<body> 
 
    <a href="https://www.google.com" target="_blank"> 
 
    <img onmouseover="mouseOver(); setTimeout(mouseOver, 500)" onmouseout="mouseOut()" id="a" src="http://downloadicons.net/sites/default/files/yellow-number-1-icon-24487.png" style="height: 200px; width: 200px;"> 
 
    </a> 
 
    <script> 
 
    function mouseOver() { 
 
     element = document.getElementById("a") 
 
     if (element.src.match("http://downloadicons.net/sites/default/files/yellow-number-1-icon-24487.png")) { 
 
     document.getElementById("a").src = "http://www.drodd.com/images15/2-9.png"; 
 
     } else if (element.src.match("http://www.drodd.com/images15/2-9.png")) { 
 
     document.getElementById("a").src = "http://pngimg.com/upload/small/number3_PNG14976.png"; 
 
     } else { 
 
     document.getElementById("a").src = "http://downloadicons.net/sites/default/files/yellow-number-1-icon-24487.png"; 
 
     } 
 
    } 
 

 
    function mouseOut() { 
 
     document.getElementById("a").src = "http://downloadicons.net/sites/default/files/yellow-number-1-icon-24487.png"; 
 
    } 
 
    </script> 
 
</body> 
 

 
</html>

来源

2017-01-03 13:34:22 Justinas

这显然是错误的。 'setInterval'以一定的时间间隔触发，而'setTimeout'只触发一次。这仅仅是因为有人不停地将鼠标移动到对象上，这会多次触发onmouseover。杀死'setInterval'会更加正确。 – Mouser

你只可以使用CSSS动画关键帧。看看片段。尝试在鼠标鼠标移到图像

.test { 
 
    margin: 30px; 
 
    width: 200px; 
 
    height: 150px; 
 
    background: url("http://lorempixel.com/output/nature-q-c-200-150-1.jpg"); 
 
} 
 
@keyframes BG-CHANGE { 
 
    
 
    0% { 
 
    background: url("http://lorempixel.com/output/nature-q-c-200-150-1.jpg"); 
 
    } 
 
    30% { 
 
     background: url("http://lorempixel.com/output/nature-q-c-200-150-7.jpg"); 
 
    } 
 
    60% { 
 
     background: url("http://lorempixel.com/output/nature-q-c-200-150-10.jpg"); 
 
    } 
 
    100% { 
 
    background: url("http://lorempixel.com/output/nature-q-c-200-150-1.jpg"); 
 
    } 
 
} 
 
.test:hover { 
 
    animation: BG-CHANGE 6s infinite; 
 
}

<div class="test"></div>

来源

2017-01-03 13:44:18 Banzay

好的替代答案。 – G0dsquad

如何使图像变多次的onmouseover

回答

相关问题