当鼠标（定位设备）未处于活动状态时（隐藏按钮）

我试图在鼠标未移动时隐藏按钮。就这样。我在这里找到了一个解决方案，但它引用了一个Google的JavaScript文件（直接链接到他们的一个托管驱动器上的JavaScript文件），我希望我的网站不要依赖于其他任何东西 - 我希望它是站立的-单独。当鼠标（定位设备）未处于活动状态时（隐藏按钮）

请帮忙！

<html> 
 
    <head> 
 
    <script type="text/javascript">> 
 
    
 
    function change(el) 
 
    { 
 
     if (el.value === "Display Menu") 
 
     el.value = "Hide Menu"; 
 
     else 
 
     el.value = "Display Menu"; 
 
    } 
 
    
 
    </script> 
 
    
 
    </head> 
 
    <body> 
 
    <input type="button" value="Display Menu" onclick="return change(this);" /> 
 
    </body> 
 
</html>

来源

2016-02-14 miasweb

您可以替换与您构建一个本地文件。这在这里使用，所以片段将起作用。如果你愿意的话，你可以将整个JQuery脚本包含在文件头中，尽管这很奇怪。 – MaxRocket

这鼠标不移动，这是足够的时间没有它闪光灯（隐藏和显示每隔几毫秒）的300毫秒之后隐藏按钮。

如果可能，为了清晰和易于选择，最好给该按钮一个ID。

设置了按钮to display:none;

按钮的CSS开始隐藏，移动上，它被设置为show()，那么计时器已准备好，如果没有检测到移动在300毫秒再次隐藏它。如果检测到移动，则重置定时器。

var timer; 
 
$(document).mousemove(function(){ 
 
    $("#mouseDrivenButton").show(); 
 
    clearTimeout(timer); 
 
    timer = setTimeout(function(){ 
 
     $("#mouseDrivenButton").hide(); 
 
    },300) 
 
});

#mouseDrivenButton { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<button id="mouseDrivenButton">Mouse Is Moving</button>

这一个是纯JavaScript FOR YOU，无需外部脚本

<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>Title</title> 
 
    <style> 
 
    #mouseDrivenButton { 
 
     display: none; 
 
    } 
 
    </style> 
 
    <script> 
 
    var timer; 
 
    document.onmousemove = function() { 
 
     document.getElementById('mouseDrivenButton').style.display = "block"; 
 
     clearTimeout(timer); 
 
     timer = setTimeout(function() { 
 
     document.getElementById('mouseDrivenButton').style.display = "none"; 
 
     }, 300) 
 
    }; 
 
    </script> 
 
</head> 
 

 
<body> 
 
    <button id="mouseDrivenButton">Mouse Is Moving</button> 
 
</body> 
 

 
</html>

来源

2016-02-14 04:29:36 MaxRocket

感谢您的帮助，但我希望不要使用Google的js文件我的帖子：“我在这里找到了一个解决方案，但它引用了一个Google的javascript文件（直接链接到他们的托管驱动器上的JavaScript文件）我希望我的网站不要依赖于其他任何东西“ 您可能忽略了这一点，但我真的很感谢您花时间写下您的所作所为。它可能会帮助别人！ – miasweb

好吧，我已经添加了一个解决方案，这是纯粹的JavaScript没有外部依赖。在未来，如果你在开始的时候让人们知道这一点很好。 – MaxRocket

我相信你找到了解决办法有jQuery的一部分你没有w蚂蚁。

这样做，因为它是纯粹的原生JavaScript。

var el = document.getElementById("btnMenu"); 
 
var timer; 
 
function showBtn(){ 
 
\t el.style.display = "block"; 
 
} 
 
function hideBtn(){ 
 
\t el.style.display = "none"; 
 
} 
 

 
hideBtn(); 
 
document.onmousemove = function(){ 
 
    showBtn(); 
 
    clearTimeout(timer); 
 
    timer = setTimeout(function(){ 
 
     hideBtn(); 
 
    },100) 
 
}

<body> 
 
    <input id="btnMenu" type="button" value="Display Menu"/> 
 
</body>

来源

2016-02-14 04:36:44 Phiter

没有工作:(。你测试过那些代码吗？如果是这样，我可以继续破解它。我花了一些时间试图弄清楚为什么它什么都没有用，谢谢 – miasweb

我甚至尝试过制作一个新的html只用你的代码文件，什么都没有发生。代码： <脚本类型== “文本/ JavaScript的”> 变种EL =的document.getElementById（ “btnMenu”）; var timer; （）{ \t el.style.display =“block”; } function hideBtn（）{ \t el.style.display =“none”; } hideBtn（）; document.onmousemove = function（）{ showBtn（）; clearTimeout（timer）; 计时器= setTimeout的（函数（）{ hideBtn（）; }，100） } <输入的ID = “btnMenu” 类型= “按钮” 值= “显示菜单”/> – miasweb

当鼠标（定位设备）未处于活动状态时（隐藏按钮）

回答

相关问题