0

私は Web ベースのキオスクで作業していますが、jquery でそれを行う方法がわかりません

私は2つのdivを使用しています.div1はスタートページのdiv2メニューで、画像の上にマウスを置くとdiv1が非表示になり、div2が表示されてメニューが表示されます。しかし、人々がメニューを使用せずに立ち去るときは、ページ全体を更新せずに div 1 に戻す必要があります。また、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>
4

1 に答える 1

1

デフォルトで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();
  }
});

作業デモ： http： //jsfiddle.net/rXjMV/

于 2013-01-12T01:04:52.810 に答える