css移动端实现与pc端一样的:acitve效果
来源:互联网 发布:最好的网络教学平台 编辑:程序博客网 时间:2024/06/06 10:40
移动前端如何与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;
都行。
0 0
- css移动端实现与pc端一样的:acitve效果
- css移动端实现与pc端一样的:acitve效果
- css-移动端:acitve效果的实现
- 简单的pc端与移动端的切换效果
- Html5实现移动端、PC端 刮刮卡效果
- Html5实现移动端、PC端 刮刮卡效果
- 如何实现移动端和pc端按下状态效果
- canvas实现移动端和PC端刮刮卡效果
- js实现一个可以兼容PC端和移动端的div拖动效果
- TouchSlider 实现(PC及移动端触摸界面)的幻灯slider效果
- pc端和移动端的css样式写法
- PC和移动端的CSS重置样式表
- PC端和移动端刮卡效果
- animate.css 实现移动端垂直滑动效果
- 判断PC端与移动端的访问
- 移动端与PC端的测试差异性
- 移动端html+css实现水平任意滚动(PC端也同理)
- 移动端html+css实现水平任意滚动(PC端也同理)
- 基础博弈—Nim博弈
- 多线程开发之NSThread——子线程模拟耗时操作(★★★虽是转载,但是附上了个人理解,firecat推荐★★★)
- 黑马程序员---Foundation基础知识汇总
- JAVA基础之接口
- winXP的最常用快捷键
- css移动端实现与pc端一样的:acitve效果
- mysql导出数据到文件
- 作业4.17~4.20
- Python入门
- Sprague-Grundy函数
- android you can attach the source by clicking attach source below 问题完美解决方案
- 约瑟夫环问题
- 在线多实例学习online MIL
- spring(基础八) spring 定时任务的几种实现