原生js实现简单的Ripple按钮实例代码


Posted in Javascript onMarch 24, 2017

整理文档,搜刮出一个原生js实现简单的Ripple按钮的代码,稍微整理精简一下做下分享。

效果如图

原生js实现简单的Ripple按钮实例代码

准备食材(html部分)

<ul id="nav">
  <li>
   <a href='#'>
    <span>首页</span>
   <span class="circle"></span>
   </a>
  </li>
  <li>
   <a href='#'>
    <span>我的</span>
   <span class="circle"></span>
   </a>
  </li>
  <li>
   <a href='#'>
    <span>更多</span>
   <span class="circle"></span>
   </a>
  </li>
 </ul>

典型的菜单li布局,里面的span.circle表示的是触摸弹出的小圆圈。

准备辅料 (css部分)

#nav {
 display: flex;
 }
 #nav li {
 position: relative;
 overflow: hidden;
 flex: 1;
 }
 li a {
  display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 }

 .circle{
 position: absolute;
 background: rgba(86,187,247,.1);
 width: 1px;
 height: 1px;
 top:50%;
 left: 50%;
 border-radius: 50%;
 }
 .circle.act{
  animation: navCircle .4s;
 }

 @keyframes navCircle
 {
 from {transform: scale(0);border-radius: 50%;}
 to {transform:scale(200);border-radius: 50%;}
 }

我的思路是这样的,给li相对定位,给小圆圈绝对定位,再给小圆圈添加动画navCircle,采用css3的缩放使其变大,至于为什么是200倍和.4s呢,经过测试这样更人性化,其余的倍数你们也可以试试。

大火烹饪 (js部分)

var li = document.getElementById('nav').querySelectorAll('li');
 var circle = document.getElementById('nav').querySelectorAll('.circle');
   for(var i=0,len = li.length;i<len;i++){
    ((i)=>{
    li[i].addEventListener('click',(e)=>{
     circle[i].setAttribute('class','circle act');
     circle[i].setAttribute('style','top:'+e.layerY+'px;left:'+e.layerX+'px');
    });

    li[i].addEventListener('touchend',()=>{
     circle[i].setAttribute('class','circle');
    })
    })(i)

   }

代码很简单,相信大家也猜到了,点击li的时候给小圆圈添加class 'act',并且设置小圆圈的起始位置,监听触摸结束的时候,取消class 'act',有人肯定要问了,为什么你不用touchstart呢,唉,因为没有layerY这个属性,找了半天都没找到啊。还有为什么不用forEach,有的浏览器不支持啊,泪奔= = !

友情提示!touchend仅支持移动端

结束

做这个部分是因为我们安卓app里面有这个功能,所以我就想看看h5怎么做,开始的思路是让宽度和高度随着时间变大,但是实现了之后感觉性能不好,所以才想到了直接增加倍数呗,于是这个功能变完美诞生了,开始享用这份套餐把 !

Javascript 相关文章推荐
提高网站信任度的技巧
Oct 17 Javascript
jquery的index方法实现tab效果
Feb 16 Javascript
超级有用的13个基于jQuery的内容滚动插件和教程
Jul 31 Javascript
30分钟就入门的正则表达式基础教程
Feb 25 Javascript
javascript重写alert方法的实例代码
Mar 29 Javascript
js特效,页面下雪的小例子
Jun 17 Javascript
纯js简单日历实现代码
Oct 05 Javascript
javascript数字时钟示例分享
Apr 23 Javascript
用C/C++来实现 Node.js 的模块(一)
Sep 24 Javascript
学习JavaScript设计模式(链式调用)
Nov 26 Javascript
Jquery树插件zTree实现菜单树
Jan 24 Javascript
Vue中错误图片的处理的实现代码
Nov 07 Javascript
原生Aajax 和jQuery Ajax 写法个人总结
Mar 24 #jQuery
jQuery实现的背景颜色渐变动画效果示例
Mar 24 #jQuery
重新理解JavaScript的六种继承方式
Mar 24 #Javascript
JavaScript验证知识整理
Mar 24 #Javascript
Bootstrap常用组件学习(整理)
Mar 24 #Javascript
详解打造 Vue.js 可复用组件
Mar 24 #Javascript
JavaScript获取URL参数的方法之一
Mar 24 #Javascript
You might like
PHP mysqli事务操作常用方法分析
2017/07/22 PHP
javascript数组组合成字符串的脚本
2021/01/06 Javascript
javascript同步Import,同步调用外部js的方法
2008/07/08 Javascript
js替代copy(示例代码)
2013/11/27 Javascript
javaScript中两个等于号和三个等于号之间的区别介绍
2014/06/27 Javascript
基于jQuery Ajax实现上传文件
2016/03/24 Javascript
再谈Javascript中的异步以及如何异步
2016/08/19 Javascript
利用Angularjs实现幻灯片效果
2016/09/07 Javascript
Node.js 回调函数实例详解
2017/07/06 Javascript
浅谈Vue2.0中v-for迭代语法的变化(key、index)
2018/03/06 Javascript
Vue无限滑动周选择日期的组件的示例代码
2018/07/18 Javascript
Vue实现美团app的影院推荐选座功能【推荐】
2018/08/29 Javascript
浅谈Vue 性能优化之深挖数组
2018/12/11 Javascript
jQuery pager.js 插件动态分页功能实例分析
2019/08/02 jQuery
在vue中使用axios实现post方式获取二进制流下载文件(实例代码)
2019/12/16 Javascript
15分钟学会vue项目改造成SSR(小白教程)
2019/12/17 Javascript
原生js实现拖拽移动与缩放效果
2020/08/24 Javascript
Vue.js暴露方法给WebView的使用操作
2020/09/07 Javascript
Python 列表(List) 的三种遍历方法实例 详解
2017/04/15 Python
如何在python中使用selenium的示例
2017/12/26 Python
python常用排序算法的实现代码
2019/11/08 Python
解决tensorflow由于未初始化变量而导致的错误问题
2020/01/06 Python
python 代码实现k-means聚类分析的思路(不使用现成聚类库)
2020/06/01 Python
keras读取训练好的模型参数并把参数赋值给其它模型详解
2020/06/15 Python
Python3基于plotly模块保存图片表格
2020/08/03 Python
详解CSS3新增的背景属性
2019/12/25 HTML / CSS
浅析HTML5中header标签的用法
2016/06/24 HTML / CSS
保加利亚手表、香水、化妆品和珠宝购物网站:Brasty.bg
2020/04/22 全球购物
阿里巴巴的Oracle DBA笔试题答案-SQL tuning类
2016/04/03 面试题
医科学校毕业生自荐信
2013/11/09 职场文书
运动会标语
2014/06/21 职场文书
心得体会的写法
2014/09/05 职场文书
办公室班子四风问题对照检查材料
2014/10/04 职场文书
护士2014年终工作总结
2014/11/11 职场文书
贷款收入证明范本
2015/06/12 职场文书
Redis性能监控的实现
2021/07/09 Redis