當鼠標（定位設備）未處於活動狀態時（隱藏按鈕）

我試圖在鼠標未移動時隱藏按鈕。就這樣。我在這裏找到了一個解決方案，但它引用了一個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

當鼠標（定位設備）未處於活動狀態時（隱藏按鈕）

回答

相關問題