DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> css移動端實現與pc端一樣的:acitve效果
css移動端實現與pc端一樣的:acitve效果
編輯:CSS詳解     
移動前端如何與pc端那樣的一個:hover的效果,在看美團h5的頁面時發現他們做對這個效果做得很好,它們只是多了一行代碼而已,對body綁定了一個touchstart事件   做移動前端也有一些日子了,一直有個問題沒有解決,就是與pc端那樣的一個:hover的效果,:hover是鼠標指針浮動在其上的元素的一個選擇器,但因為在移動端是沒有鼠標的,代替的是觸摸屏,用戶也不是有“鼠標指針浮動在其上的元素”的情況,有也很少。 所以取代的應該:active這個選擇器,但是通過實踐,發現情況不是很理想,在QQ浏覽器上有時觸發,有沒不觸發,在我mx3帶自浏覽器上根本沒效果。

最近在看美團h5的頁面時發現他們做對這個效果做得很好(這裡說實話,美團網在h5這一塊做得真好),看了他們代碼之後,發現他們也是用:active來實現這個效果,但他們多了一行JS代碼,


復制代碼代碼如下:
document.body.addEventListener('touchstart', function () { });

其實這行代碼帶沒有做什麼事,只是對body綁定了一個touchstart事件,然後也沒做什麼事。

自已實踐了一下發現可以了,效果真心不錯。贊一下美團。

ps:在移動端中浏覽器會有自帶的一個點擊高亮效果,可以通過給a標簽或者body,Html加

復制代碼代碼如下:
-webkit-tap-highlight-color:transparent;


都行。
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved