原生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 相关文章推荐
Prototype 工具函数 学习
Jul 23 Javascript
jquery解析XML字符串和XML文件的方法说明
Feb 21 Javascript
为jquery的ajaxfileupload增加附加参数的方法
Mar 04 Javascript
javascript模拟map输出与去除重复项的方法
Feb 09 Javascript
JavaScript常用脚本汇总(二)
Mar 04 Javascript
JS使用JSON作为参数实例分析
Jun 23 Javascript
JS验证字符串功能
Feb 22 Javascript
用ES6写全屏滚动插件的示例代码
May 02 Javascript
node.js命令行教程图文详解
May 27 Javascript
Vue+ElementUI项目使用webpack输出MPA的方法
Aug 27 Javascript
原生js实现3D轮播图
Mar 21 Javascript
Layer+Echarts构建弹出层折线图的方法
Sep 25 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中的字符串函数
2006/10/09 PHP
深入浅析PHP无限极分类的案例教程
2016/05/09 PHP
php each 返回数组中当前的键值对并将数组指针向前移动一步实例
2016/11/22 PHP
php7安装yar扩展的方法详解
2017/08/03 PHP
PHP中十六进制颜色与RGB颜色值互转的方法
2019/03/18 PHP
Javascript处理DOM元素事件实现代码
2012/05/23 Javascript
Jquery操作radio的简单实例
2014/01/06 Javascript
js实现简单鼠标跟随效果的方法
2015/04/10 Javascript
js限制文本框只能输入整数或者带小数点的数字
2015/04/27 Javascript
JavaScript性能优化之小知识总结
2015/11/20 Javascript
详解Javascript事件驱动编程
2016/01/03 Javascript
js手机号批量滚动抽奖实现代码
2020/04/17 Javascript
bootstrap表单按回车会自动刷新页面的解决办法
2017/03/08 Javascript
NodeJS链接MySql数据库的操作方法
2017/06/27 NodeJs
nodejs基于WS模块实现WebSocket聊天功能的方法
2018/01/12 NodeJs
判断“命令按钮”是否被鼠标单击详解
2019/07/31 Javascript
python多线程http下载实现示例
2013/12/30 Python
Python3指定路径寻找符合匹配模式文件
2015/05/22 Python
用Pygal绘制直方图代码示例
2017/12/07 Python
Ubuntu16.04/树莓派Python3+opencv配置教程(分享)
2018/04/02 Python
python下PyGame的下载与安装过程及遇到问题
2019/08/04 Python
Python开发之基于模板匹配的信用卡数字识别功能
2020/01/13 Python
Python3实现mysql连接和数据框的形成(实例代码)
2020/01/17 Python
python中selenium库的基本使用详解
2020/07/31 Python
ASOS亚洲:ASOS Asia
2018/03/04 全球购物
联想韩国官网:Lenovo Korea
2018/05/10 全球购物
Hoka One One法国官网:美国专业跑鞋品牌
2018/12/29 全球购物
C/C++有关内存的思考题
2015/12/04 面试题
将一个文本文件的内容按倒序打印出来
2015/01/05 面试题
三年大学自我鉴定
2014/01/16 职场文书
人力资源部经理助理岗位职责
2014/03/04 职场文书
党员公开承诺书2015
2015/01/21 职场文书
经费申请报告
2015/05/15 职场文书
开票证明
2015/06/23 职场文书
初中英语教学随笔
2015/08/15 职场文书
高中团支书竞选稿
2015/11/21 职场文书