H5移动web页面触摸按钮效果实现-模拟按钮hover效果实现

来源：互联网发布：淘桃美工网编辑：程序博客网时间：2024/05/22 04:40

移动端触摸按钮的效果，可明示用户有些事情正要发生，是一个比较好体验，但是移动设备中并没有鼠标指针，使用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>

0 0