移動端 仿hover效果觸發導航選單展開

2021-08-08 10:44:15 字數 1100 閱讀 9681

pc端,很多互動是由滑鼠滑過觸發偽類『:hover』來實現的,

而移動端是沒有滑鼠hover事件的,

我們可以將原來響應:hover的dom元素,

繫結監聽touchstart和touchend,

動態新增/除去 『.hover』這個類來達到等價於pc端互動的效果。

邏輯核心:

**ontouchstart 相當於 onmouseover,

ontouchend 相當於 onmouseout。**

class="hasul">

選單ap>

a子選單1li>

a子選單2li>

ul>

li>

class="hasul">

選單bp>

b子選單1li>

b子選單2li>

ul>

li>

ul>

/*css:*/

/*含有展開選單的導航鏈結*/

.hasul

/*未展開子選單*/

.hasul>ul

/*子選單展開樣式*/

.hasul

:hover>ul,

.hasul

.hover>ul

/*啟用選項顏色改變*/

.hasul

:hover>ul>li

:hover,

.hasul

.hover>ul>li

:hover

//js:

document.body.addeventlistener('touchstart',function

(){});

var mylinks = document.queryselectorall('.hasul');

for(var i = 0; i < mylinks.length; i++), false);

mylinks[i].addeventlistener('touchend', function

(), false);

}

以上です。

移動端彈性效果

布局一 定義頁面整體高度為100 然後使用 position absolute 布局可解決 header 彈性滾動區域 footer html,body wrap header,footer header footer main 布局二 定義頁面整體高度為100 然後使用 display flex ...

移動端輪播效果

一 涉及知識點 1.touchstart touchmove touchend 2.觸控引數,事件e e.touches 螢幕中所有手勢列表 e.touches 0 獲取第乙個手勢,是乙個json物件 屬性有pagex,pagey.用於touchstart,touchmove事件中 e.change...

移動端觸發onmousemoveout事件

對於input,移動端不能觸發onmousemoveout進行搜尋,那麼可以使用監聽來解決 var addhandler function element,type,handler else if element.attachevent else var move ontouchstart in d...