Question

此代码在前端的指定时间间隔内动态移动某些仪表板文件。现在，一旦我将鼠标移动到任何特定的仪表板文件上，它就不会停止。所以建议我停止鼠标悬停动态操作的代码。

var i=0;

var stp;

var dd = ['/pentaho/content/pentaho-cdf-dd/Render?solution=FPBI&path=%2FDashboards&file=FPBI_Map.wcdf',
          '/pentaho/content/pentaho-cdf-dd/Render?solution=FPBI&path=%2Fcss&file=AnalysisBasedonReg.wcdf',
          '/pentaho/content/pentaho-cdf-dd/Render?solution=FPBI&path=%2Fcss&file=AnalysisBasedonTime.wcdf'];
function k()
{
self.setInterval("clock()",8000);
}
function clock()
{
document.getElementById('mainfrm').src =dd[i];
i++;
if(i==4)
{
i=0;
}
}


function StopFunction(){
clearInterval(stp);
}

布局页面：

<div class="map">
<body onload="k()" onmouseover="StopFunction()">
<iframe src="/pentaho/content/pentaho-cdf-dd/Render?solution=FPBI&path=%2Fcss&file=FPBIImg.wcdf" style="width:675px;height:690px;overflow:hidden" frameborder='0' id="mainfrm">
</iframe>
</div>
</div>
.

- 修改

现在onmouseover功能正在运行但是当我移除鼠标时不会发生任何动作。我尝试使用onmouseout函数。任何人都可以建议我在删除鼠标后保留或继续存在旧的js功能。

Answer 1

var stp;
function k()
{
 stp=setInterval(function(){clock()},8000);
}
function clock()
{
 document.getElementById('mainfrm').src =dd[i];
 i++;
 if(i==4)
{
 i=0;
 }
 }

function StopFunction()
{
  clearInterval(stp);
}

<div class="map" onmouseover="StopFunction()">

Answer 2

试试这个 - 完整的代码 - 所有不引人注目的唯一要考虑的是全球变形，这是不赞成的

DEMO

<html>
<head>
<script>
var tId, urlIndex=0, dd = ['/pentaho/content/pentaho-cdf-dd/Render?solution=FPBI&path=%2FDashboards&file=FPBI_Map.wcdf',
      '/pentaho/content/pentaho-cdf-dd/Render?solution=FPBI&path=%2Fcss&file=AnalysisBasedonReg.wcdf',
      '/pentaho/content/pentaho-cdf-dd/Render?solution=FPBI&path=%2Fcss&file=AnalysisBasedonTime.wcdf'];

function clock() {
  document.getElementById('mainfrm').src =dd[urlIndex];
  urlIndex++;
  if(urlIndex>=dd.length) {
    urlIndex=0;
  }
}
function k() {
  tId = setInterval(clock,8000);
}
window.onload=function() {
  k(); // start the script
  var mapDiv = document.getElementById("mapDiv");
  mapDiv.onmouseover=function() {
    clearInterval(tId)
  }

  // the following MAY trigger when over the iframe - remove if necessary
  mapDiv.onmouseout=function() {
    k();
  }

}
</script>
</head>
<body>

  <div id="mapDiv" class="map">
    <iframe src="/pentaho/content/pentaho-cdf-dd/Render?solution=FPBI&path=%2Fcss&file=FPBIImg.wcdf" style="width:675px;height:690px;overflow:hidden" frameborder='0' id="mainfrm"></iframe>
  </div>
</body>
</html>

如何在鼠标上停止js功能呢？

2 个答案: