简体   繁体   English

div1隐藏到div2显示返回div1的时间不刷新页面

[英]div1 hide to div2 show return to div1 timed without refresh page

I am working on a web based kiosk and have no idea how do it in jquery 我正在基于Web的信息亭中工作,不知道如何在jquery中进行操作

I use 2 divs div1 is startpage div2 menu if they mouseover a image, div1 hides and div2 comes up and shows the menu. 我使用2 divs div1是起始页div2菜单,如果它们将鼠标悬停在图像上,则div1隐藏并且div2出现并显示菜单。 But when people dont use the menu and walk away it needs to switch back to div 1 without refreshing the whole page. 但是,当人们不使用菜单走开时,需要切换回div 1而不刷新整个页面。 also the timed switch to div1 must start when div2 is active. 当div2处于活动状态时,也必须启动到div1的定时开关。

<div 
id="start" 
style="display:none; 
  position:absolute; 
  right:0px; 
  top:0px;
  width:1680px;
  height:1050px; 
  background-image:url(start/images/overlays/start_overlay.png);
  background-color:;
  padding: 0px;
  z-index:7;
  "> start content here <br> <a 
  onmouseover="ShowContent('menu'); return true;"
  href="javascript:ShowContent('menu'); HideContent('start'); ">
  [image]</a>
  <div>

<div 
id="menu" 
style="display:none; 
  position:absolute; 
  right:0px; 
  top:0px;
  width:1680px;
  height:1050px; 
  background-image:url(start/images/overlays/menu_overlay.png);
  background-color:;
  padding: 0px;
  z-index:7;
  "> Menu Content here </div>

<script type="text/javascript" language="JavaScript"><!--
function HideContent(d) {
if(d.length < 1) { return; }
document.getElementById(d).style.display = "none";
}
function ShowContent(d) {
if(d.length < 1) { return; }
document.getElementById(d).style.display = "block";
}
function ReverseContentDisplay(d) {
if(d.length < 1) { return; }
if(document.getElementById(d).style.display == "none") 
{ document.getElementById(d).style.display = "block"; }
else { document.getElementById(d).style.display = "none"; }
}
</script>

As I understand you want to show div1 by default, then show div2 when user begins interacting with page and go back to div1 after some time of user inactivity. 据我了解,您希望默认显示div1,然后在用户开始与页面进行交互时显示div2,并在用户不活动一段时间后返回div1。

$(function(){
  var activeTime = 3000,
      activeTO;

  $(document).on("mousemove keydown scroll", function(){
    $("#div1").hide();
    $("#div2").show();
    clearTimeout(activeTO);
    activeTO = setTimeout(kioskIdle, activeTime);
  });

  function kioskIdle(){
    $("#div1").show();
    $("#div2").hide();
  }
});

Working demo: http://jsfiddle.net/rXjMV/ 工作演示: http : //jsfiddle.net/rXjMV/

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM