tab选项卡在鼠标经过时实现切换延迟
生活随笔
收集整理的這篇文章主要介紹了
tab选项卡在鼠标经过时实现切换延迟
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
偶然間在瀏覽網(wǎng)頁時，發(fā)現(xiàn)這樣的效果。當(dāng)鼠標(biāo)不經(jīng)意間滑過tab時并不會切換，當(dāng)鼠標(biāo)停留在上面一段時候后才會切換。
個人覺得用戶體驗不錯，優(yōu)點是1.當(dāng)用戶只是滑過標(biāo)簽，并不需要切換，而此時如果切換標(biāo)簽需要請求數(shù)據(jù)時，會避免不必要的異步請求；2.避免頁面在用戶不需要的時候切換跳動，影響用戶體驗。
網(wǎng)上查閱了幾個方法，發(fā)現(xiàn)下面的方法更簡潔有效。整理下來，供以后參考。
其中的重點是那段js代碼：原理是，通過hover的時候設(shè)置定時器，延遲執(zhí)行切換方法，離開時，清楚計時器。當(dāng)hover的時間小于延遲時間時，會清楚計時器，不會執(zhí)行切換方法。僅當(dāng)停留時間大于延遲時間才會切換。這樣能有效避免滑過tab觸發(fā)切換事件。
<!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?div")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:?51px;border:?1px?dashed?#ccc;}.tab?{width:?50%;float:?left;line-height:?50px;cursor:?pointer;}.cur?{border-bottom:?2px?solid?red;}</style></head><body><div?style="width:?300px;margin-left:?300px;"?class="main"><div?class="head"><div?class="tab?cur">tab1</div><div?class="tab">tab2</div></div><div?class="tab-content"><div>tab1的內(nèi)容<br>tab1的內(nèi)容<br>tab1的內(nèi)容<br></div><div?style="display:?none;">tab2的內(nèi)容<br>tab2的內(nèi)容<br>tab2的內(nèi)容<br></div></div></div></body></html>?
轉(zhuǎn)載于:https://blog.51cto.com/12883930/1923785
總結(jié)
以上是生活随笔為你收集整理的tab选项卡在鼠标经过时实现切换延迟的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Linux学习笔记——例说makefil
- 下一篇： Vijos P1756 数字反转【进制】