原生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系列(45):代码复用模式(避免篇)详解
Mar 04 Javascript
使用堆实现Top K算法(JS实现)
Dec 25 Javascript
怎么限制input的text里输入的值只能是数字(正则、js)
May 16 Javascript
js定义类的几种方法(推荐)
Jun 08 Javascript
微信小程序 绘图之饼图实现
Oct 24 Javascript
js图片放大镜效果实现方法详解
Oct 28 Javascript
Vue 监听列表item渲染事件方法
Sep 06 Javascript
angular中子控制器向父控制器传值的实例
Oct 08 Javascript
django使用channels2.x实现实时通讯
Nov 28 Javascript
vue微信分享的实现(在当前页面分享其他页面)
Apr 16 Javascript
微信小程序云开发之新手环境配置
May 16 Javascript
Flutter 超实用简单菜单弹出框 PopupMenuButton功能
Aug 06 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
CodeIgniter框架过滤HTML危险代码
2014/06/12 PHP
PHP统计目录大小的自定义函数分享
2014/11/18 PHP
PHP的微信支付接口使用方法讲解
2019/03/08 PHP
获取HTML DOM节点元素的方法的总结
2009/08/21 Javascript
60行js代码实现俄罗斯方块
2015/03/31 Javascript
jQuery实现为控件添加水印文字效果(附源码)
2015/12/02 Javascript
原生JS实现圆环拖拽效果
2017/04/07 Javascript
jQuery实现节点的追加、替换、删除、复制功能示例
2017/07/11 jQuery
Vue2.0实现将页面中表格数据导出excel的实例
2017/08/09 Javascript
深入理解React中何时使用箭头函数
2017/08/23 Javascript
详解JavaScript中的函数、对象
2019/04/01 Javascript
webpack 代码分离优化快速指北
2019/05/18 Javascript
js实现纯前端压缩图片
2020/11/16 Javascript
python实现批量获取指定文件夹下的所有文件的厂商信息
2014/09/28 Python
详解Python中的from..import绝对导入语句
2016/06/21 Python
Python中防止sql注入的方法详解
2017/02/25 Python
Python实现统计给定列表中指定数字出现次数的方法
2018/04/11 Python
Python实现购物车购物小程序
2018/04/18 Python
python解析yaml文件过程详解
2019/08/30 Python
Python利用Pillow(PIL)库实现验证码图片的全过程
2020/10/04 Python
Python 的 f-string 可以连接字符串与数字的原因解析
2021/02/20 Python
IE下实现类似CSS3 text-shadow文字阴影的几种方法
2011/05/11 HTML / CSS
HTML5自定义data-* data(obj)属性和jquery的data()方法的使用
2012/12/13 HTML / CSS
Html5 FileReader实现即时上传图片功能实例代码
2014/09/01 HTML / CSS
印尼值得信赖的在线交易网站:Bukalapak
2019/03/11 全球购物
Interhome丹麦:在线预订度假屋和公寓
2019/07/18 全球购物
Guess荷兰官网:美国服饰品牌
2020/01/22 全球购物
国培远程培训感言
2014/03/08 职场文书
养生餐厅创业计划书范文
2014/03/26 职场文书
路政管理求职信
2014/06/18 职场文书
高中教师先进事迹材料
2014/08/22 职场文书
大班下学期个人总结
2015/02/13 职场文书
调任通知
2015/04/21 职场文书
大学生活委员竞选稿
2015/11/21 职场文书
竞选稿之小学班干部
2019/10/31 职场文书
MySQL中VARCHAR与CHAR格式数据的区别
2021/05/26 MySQL