我正在开发基于网络的自助服务终端,并且不知道如何在jquery
中进行操作我使用2个div div1是startpage 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>
答案 0 :(得分: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();
}
});