手机端页面的点击效果实现
来源:互联网 发布:coc野蛮人之王升级数据 编辑:程序博客网 时间:2024/05/16 17:09
前提
产品设计 UI 经常会在设计时设计手机点击效果,虽然只有这个一个效果,但是却让我感觉非常头疼。。
解决历程
首先说 手机端会有一个默认的样式,点击出现一个黑块,这个可以通过
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); or -webkit-tap-highlight-color: transparent;
去掉黑块
我刚开始想的是添加一个点击效果,但是手机端点击会有延迟,并且在点击之后也不好处理,没有采用这个方案。
又想到 touchstart,touchend 之后切换class
$("button").on('touchstart touchend ',function(event){ event.preventDefault() $("p").toggleClass("main");});
但是在设置背景的时候就会出问题, 而且必须阻止事件冒泡
所以我最后考虑了 settimeout
$("button").on('touchstart',function(){ //添加样式 settimeout(function(){ //消除掉样式 },300) });
并且在页面层,我放了两个div position 重合在一起,然后点击消除,300毫秒后消失 这样可以防止样式切换造成的空白期。。
阅读全文
1 0
- 手机端页面的点击效果实现
- 点击页面上某个元素实现动画的滚动效果
- 手机端滑动实现页面左右切换效果
- 自定义 手机收到“通知”效果,并且点击后进入之前播放的页面
- Fragment+RadioButton实现点击切换页面效果
- Fragment+RadioButton实现点击切换页面效果
- 解决手机端页面的鼠标点击出现蓝色背景
- jQuery实现手机版页面翻页效果。
- 去除手机页面点击元素的阴影
- web页面点击整页变灰的效果
- 点击跳转页面后加上的效果
- 实现正在竞价时和点击竞价时的不同的渲染页面效果!
- JavaScript 实现点击链接,多个页面内容同时改变的效果
- JS实现点击图片在当前页面放大的漂亮效果
- 实现页面上点击小图片,弹出大图片的效果
- 两颗星星实现的星星点击评分效果实例页面
- web页面如何实现点击按钮进行手机拨号?
- 手机端页面效果测试链接
- 求环中的最长连续子序列的和
- 内涵段子视频怎么下载到本地?怎么下载高清内涵视频?
- 身份证排序
- 算法提高 日期计算
- Python yield 使用浅析
- 手机端页面的点击效果实现
- CSipSimple源码分析(一)之代码流程和用户注册流程
- Java成员变量和成员方法
- 大话数据结构 code 第四章 03链栈_LinkStack
- C++快速幂
- python下人脸检测
- Codeforces 835D Round #427 Div2D :回文串DP
- 设计模式-外观模式
- 20个非常有用的Java程序片段