原生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 相关文章推荐
JavaScript中关于indexOf的使用方法与问题小结
Aug 05 Javascript
javascript 构造函数强制调用经验总结
Dec 02 Javascript
JavaScript italics方法入门实例(把字符串显示为斜体)
Oct 17 Javascript
Javascript中的默认参数详解
Oct 22 Javascript
基于jQuery实现复选框是否选中进行答题提示
Dec 10 Javascript
谷歌Chrome浏览器扩展程序开发小记
Jan 06 Javascript
浅谈jQuery操作类数组的工具方法
Dec 23 Javascript
微信小程序 利用css实现遮罩效果实例详解
Jan 21 Javascript
js的各种数据类型判断的介绍
Jan 19 Javascript
说说Vue.js中的functional函数化组件的使用
Feb 12 Javascript
jQuery实现弹出层效果
Dec 10 jQuery
vue.js 输入框输入值自动过滤特殊字符替换中问标点操作
Aug 31 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 DOMElement 操作xml 文档的实现代码
2013/05/10 PHP
浅谈php冒泡排序
2014/12/30 PHP
ThinkPHP静态缓存简单配置和使用方法详解
2016/03/23 PHP
jQuery中绑定事件的命名空间详解
2011/04/05 Javascript
JQUERY的属性选择符和自定义选择符使用方法(二)
2011/04/07 Javascript
利用js的Node遍历找到repeater的一个字段实例介绍
2013/04/25 Javascript
我的Node.js学习之路(三)--node.js作用、回调、同步和异步代码 以及事件循环
2014/07/06 Javascript
用jquery实现动画跳到顶部和底部(这个比较简单)
2014/09/01 Javascript
JavaScript避免内存泄露及内存管理技巧
2014/09/05 Javascript
javascript+HTML5的Canvas实现Lab单车动画效果
2015/08/07 Javascript
JavaScript计划任务后台运行的方法
2015/12/18 Javascript
微信小程序 教程之列表渲染
2016/10/18 Javascript
nodejs学习笔记之路由
2017/03/27 NodeJs
bootstrap daterangepicker双日历时间段选择控件详解
2017/06/15 Javascript
webpack 2的react开发配置实例代码
2017/07/28 Javascript
Angularjs 手写日历的实现代码(不用插件)
2017/10/18 Javascript
Gulp实现静态网页模块化的方法详解
2018/01/09 Javascript
vue2中,根据list的id进入对应的详情页并修改title方法
2018/08/24 Javascript
nodejs读取本地中文json文件出现乱码解决方法
2018/10/10 NodeJs
Vue之beforeEach非登录不能访问的实现(代码亲测)
2019/07/18 Javascript
vue实现图片按比例缩放问题操作
2020/08/11 Javascript
[02:36]DOTA2英雄基础教程 一击致命幻影刺客
2013/12/06 DOTA
python通过shutil实现快速文件复制的方法
2015/03/14 Python
python实现简单的计时器功能函数
2015/03/14 Python
Python打印scrapy蜘蛛抓取树结构的方法
2015/04/08 Python
python实现带声音的摩斯码翻译实现方法
2015/05/20 Python
python实现人脸识别经典算法(一) 特征脸法
2018/03/13 Python
python合并同类型excel表格的方法
2018/04/01 Python
Python使用win32com模块实现数据库表结构自动生成word表格的方法
2018/07/17 Python
python的pip有什么用
2020/06/17 Python
如何让python的运行速度得到提升
2020/07/08 Python
军训心得体会
2013/12/31 职场文书
运动会跳远广播稿
2014/02/04 职场文书
研讨会主持词
2014/04/02 职场文书
同事欢送会致辞
2015/07/31 职场文书
apache基于端口创建虚拟主机的示例
2021/04/24 Servers