移动web端模拟hover效果

wenyiweb 发布于2019-08-21 10:57 / 2566人阅读

摘要：在端的用户体验中扮演着很重要的角色，那么移动端我们又该如何增强这方面的用户体验呢下面我简单的在移动端模拟了下的效果。其他上面只是在移动端对进行了简单的模拟，还有很多不足的地方。

hover在PC端的用户体验中扮演着很重要的角色，那么移动web端我们又该如何增强这方面的用户体验呢？

下面我简单的在移动web端模拟了下hover的效果。

效果预览

请在移动端打开源码

核心代码

//按钮点击效果
$(document).on("touchstart", ".action-btn:not(.disable)", function (e) {
    var $this = $(this);
    var flag = true;
    //遍历子类
    $this.find("*").each(function () {
        //查看有没有子类触发过active动作
        if ($(this).hasClass("active")) flag = false;
    });
    //如果子类已经触发了active动作，父类则取消active触发操作
    if (flag) $this.addClass("active");

});
$(document).on("touchmove", ".action-btn:not(.disable)", function (e) {
    if ($(this).hasClass("active")) $(this).removeClass("active");
});
$(document).on("touchend", ".action-btn:not(.disable)", function (e) {
    if ($(this).hasClass("active")) $(this).removeClass("active");
});

代码是基于jQuery的

实现原理

基于touchstart、touchmove、touchend这三个事件，动态增删class。

默认只对含有action-btn class且不含有disable class的对象生效

使用方法 场景1

普通列表点击


    item1
    item2
    item3
    item4
    item5

只需要给列表添加上action-btn class以及提供相应的active class。

场景2

复杂列表点击


    
        item0
        X
    
    item1
    item2
    item3
    item4

效果：点击列表时，触发列表点击效果，点击小叉时，触发小叉点击效果，小叉所在列不触发点击效果。

注意：无论小叉是否有点击效果（即active class），都需要给小叉添加action-btn class。即：当列和列的子元素都有点击逻辑的时候，都需要给它们添加action-btn class，否则会触发父类元素的点击效果。

其他

上面只是在移动web端对hover进行了简单的模拟，还有很多不足的地方。例如：当用户滑动列表时，滑动开始触点所在的列的点击效果会一闪而过。这个是因为点击效果的触发条件是touchstart。我也有尝试在触发touchstart时，延迟一定时间后判断是否触发过touchmove，没有触发的话才触发点击效果。但是在android上表现不佳，所以没有贴出类。

后续我会结合我的这篇文章10行代码搞定移动web端自定义tap事件中的tap事件进行效果优化。

文章有什么不对的地方，望大家指正。大家有什么好的实现方法，欢迎交流！

GPU云服务器云服务器 js 移动端效果图移动端web web移动端布局 web移动端开发

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/86481.html

移动端滚动研究

摘要：还会有一个性能上的问题就是当页面的列表过长，元素过多时，在模拟滚动，下拉刷新这段时间内，页面也会有卡顿现象，这里采取了一个优化策略即列表较长时数量较多时，在触发下拉刷新的时机时将页面视窗之外的元素隐藏或者存放在里面。移动web滚动问题在移动端如果使用局部滚动，意思就是我们的滚动在一个固定宽高的div内触发，将该div设置成overflow:scroll/auto;来形成div内部的...

ghnor 2019-08-23 14:32 评论0 收藏0
Web移动端页面 --响应式和动态REM

摘要：当媒介最大宽度为且是横屏时里面的样式生效目前前端开发项目类型可以分为两种方式，和。这样我们的响应式网页才完全生效了。移动端特点移动端特点没有有没有滚动条没有没有因为移动端是没有事件的所以当我们在需要兼容移动端的页面中应该尽量少用事件。鄙人最近才刚刚开始学习一些关于移动端的知识，还只是个小白，文中可能有许多理解错误，望指出，请多多见谅。响应式什么是响应式页面呢？顾名思义响应式页面就是能做...

BLUE 2019-04-23 13:44 评论0 收藏0
移动端模拟hover：按钮点击变色之后还原

摘要：移动端按钮点击变色之后还原按钮按钮方法三网友的力量是强大，后来从网上找到了一个列表页的，升级版。移动端模拟自定义按钮点击效果遍历子类查看有没有子类触发过动作如果子类已经触发了动作，父类则取消触发操作需求：点击按钮希望像在PC端那样有个类似于hover的效果，触摸按钮变色，手指离开变回原来的颜色；方法一：CSS3+JS 用keyframes动画，js点击按钮时添加keyframes动...

darkbug 2019-08-30 13:21 评论0 收藏0
移动端模拟hover：按钮点击变色之后还原

摘要：移动端按钮点击变色之后还原按钮按钮方法三网友的力量是强大，后来从网上找到了一个列表页的，升级版。移动端模拟自定义按钮点击效果遍历子类查看有没有子类触发过动作如果子类已经触发了动作，父类则取消触发操作需求：点击按钮希望像在PC端那样有个类似于hover的效果，触摸按钮变色，手指离开变回原来的颜色；方法一：CSS3+JS 用keyframes动画，js点击按钮时添加keyframes动...

Reducto 2019-08-20 13:39 评论0 收藏0