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...