Heim > Artikel > Web-Frontend > Beispielcode-Freigabe zum Implementieren einer Umschaltverzögerung, wenn die js-Maus über die Tab-Registerkarte läuft
Beispielcode-Freigabe zum Implementieren einer Umschaltverzögerung, wenn die js-Maus über die Tab-Registerkarte läuft
- 黄舟Original
- 2017-03-25 14:43:051353Durchsuche
Dieser Artikel stellt hauptsächlich den Umschaltverzögerungseffekt von js vor, wenn die Maus über die Registerkarte fährt. Er hat einen bestimmten Referenzwert.
Ich habe ihn zufällig entdeckt Dieser Effekt tritt beim Surfen im Internet auf. Wenn die Maus versehentlich über die Registerkarte gleitet, wechselt sie nicht. Sie wechselt jedoch, wenn die Maus eine Weile darauf bleibt.
Persönlich denke ich, dass die Benutzererfahrung gut ist: 1. Wenn der Benutzer nur über die Registerkarte wischt und nicht wechseln muss und wenn für den Wechsel der Registerkarten Daten angefordert werden müssen, werden unnötige asynchrone Anforderungen auftreten vermieden; 2. Vermeiden Sie, dass die Seite wechselt und springt, wenn der Benutzer sie nicht benötigt, was sich auf die Benutzererfahrung auswirkt.
Ich habe mehrere Methoden online überprüft und festgestellt, dass die folgende Methode prägnanter und effektiver ist. Zur späteren Bezugnahme organisiert.
Der entscheidende Punkt ist der js-Code: Das Prinzip besteht darin, den Timer beim Durchlaufen des Schwebeflugs einzustellen, die Ausführung der Umschaltmethode zu verzögern und den Timer beim Verlassen zu löschen. Wenn die Schwebezeit kürzer als die Verzögerungszeit ist, wird der Timer gelöscht und die Umschaltmethode wird nicht ausgeführt. Die Umschaltung erfolgt nur, wenn die Verweilzeit größer als die Verzögerungszeit ist. Dadurch kann effektiv vermieden werden, dass die Lasche verschoben wird, um das Schaltereignis auszulösen.
Code kopieren
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery.1.11.3.min.js"></script>
<script>
$(function() {
var t_li = $(".tab")
var c_li = $(".tab-content p")
t_li.hover(function() {
var i = t_li.index($(this));
function way() {
t_li.removeClass("cur").eq(i).addClass("cur");
c_li.hide().eq(i).show();
}
timer = setTimeout(way, 500);
}, function() {
clearTimeout(timer);
});
});
</script>
<style>
.head {
width: 300px;
height: 50px;
border: 1px dashed #ccc;
}
.tab {
width: 50%;
float: left;
line-height: 50px;
cursor: pointer;
}
.cur {
border-bottom: 2px solid red;
}
</style>
</head>
<body>
<p style="width: 300px;margin-left: 300px;" class="main">
<p class="head">
<p class="tab cur">tab1</p>
<p class="tab">tab2</p>
</p>
<p class="tab-content">
<p>tab1的内容<br>tab1的内容<br>tab1的内容<br></p>
<p style="display: none;">tab2的内容<br>tab2的内容<br>tab2的内容<br></p>
</p>
</p>
</body>
</html>Das obige ist der detaillierte Inhalt vonBeispielcode-Freigabe zum Implementieren einer Umschaltverzögerung, wenn die js-Maus über die Tab-Registerkarte läuft. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!