移动端触摸按钮的效果,可明示用户有些事情正要发生,是一个比较好体验,但是移动设备中并没有鼠标指针,使用css的hover并不能满足我们的需求,还好国外有个激活css的active效果,代码如下:

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <meta
content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"
name="viewport"> <style> .btn{ display: block; position: relative; top: 100px;
margin: 20px; width: 200px; height: 50px; line-height: 50px; text-align:
center; border-radius: 5px; font-size: 18px; color: salmon; background-color:
skyblue; } .btn-on{ background-color: slateblue; } </style> </head> <body> <div
class="btn"></div> <script> var btn=document.querySelector(".btn");
btn.ontouchstart=function(){ this.className="btn btn-on"; }
btn.ontouchend=function(){ this.className="btn"; } </script> </body> </html>

技术
©2019-2020 Toolsou All rights reserved,
LinkedHashMap基本用法&使用实现简单缓存 dedecms网站被黑 劫持到其他网站如何解决苹果不送充填器耳机真为环保?可能还是为了赚钱吧图片格式转换错误总结-myBatis plus 分页numpy:多维数组的创建用C语言做很简单的飞机游戏Keras保存与加载模型(JSON+HDF5)福布斯中国汽车富豪榜:何小鹏第11 李想第14 李斌第15hive大量小文件处理方法总结