js 마우스가 탭 탭을 통과할 때 전환 지연을 구현하는 샘플 코드 공유
- 黄舟원래의
- 2017-03-25 14:43:051407검색
이 글에서는 마우스가 탭 위로 지나갈 때 js의 전환 지연 효과를 주로 자세히 소개하고 있는데, 관심 있는 친구들이 참고할 수 있는 내용이 있습니다.
우연히 발견했습니다. 웹을 탐색하는 동안 이 효과가 나타납니다. 마우스가 실수로 탭 위로 미끄러지면 전환되지 않습니다. 마우스가 잠시 동안 탭 위에 있으면 전환됩니다.
개인적으로 사용자 경험이 좋다고 생각합니다. 장점은 다음과 같습니다. 1. 사용자가 탭 위로 슬라이드만 하면 전환할 필요가 없고 탭 전환에 데이터 요청이 필요한 경우 불필요한 비동기 요청이 발생합니다. 2. 피하십시오. 사용자가 필요하지 않을 때 페이지를 전환하고 이동하여 사용자 경험에 영향을 줍니다.
온라인에서 여러 가지 방법을 확인해 본 결과 다음 방법이 더 간결하고 효과적인 것으로 나타났습니다. 나중에 참조할 수 있도록 정리했습니다.
핵심은 js 코드입니다. 호버를 통과할 때 타이머를 설정하고 전환 메서드의 실행을 지연하며 나갈 때 타이머를 지우는 것이 원칙입니다. 호버링 시간이 지연 시간보다 작으면 타이머가 지워지고 전환 방법이 실행되지 않습니다. 전환은 드웰 시간이 지연 시간보다 클 때만 발생합니다. 이렇게 하면 전환 이벤트 를 트리거하기 위해 탭을 밀어내는 것을 효과적으로 방지할 수 있습니다.
코드 복사
<!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>위 내용은 js 마우스가 탭 탭을 통과할 때 전환 지연을 구현하는 샘플 코드 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.