• 新规:续航150公里以下新能源车取消补贴 2019-10-11
  • 法国革命时代,女人流行穿什么 2019-10-11
  • 黑龙江省县(市、区)委统战部长培训班举办 2019-10-06
  • “夏季第一瓜”竟是它! 2019-10-06
  • 《阿古顿巴》藏语版在藏语卫视首播 2019-09-06
  • 晋中市“三同步”推动互联网治理创新 2019-08-27
  • 法媒:研究称美国人常用药物或增加抑郁风险 2019-08-27
  • 宝贝是地名,你能想到这么浪漫的地名在哪儿吗? 2019-08-15
  • 何树山副省长到方圆机电调研指导工作 2019-08-15
  • 乐彩客:js点击按钮实现水波纹效果代码(CSS3和Canves)

    来源:本网整理
    s">

    js点击按钮实现水波纹效果代码(CSS3和Canves)

    彩票双色球历史开奖结果 www.s9h6.com 作者:野兽'' 字体:[增加 减小] 类型:转载 时间:2016-09-15 我要评论

    这篇文章主要为大家详细介绍了点击按钮实现水波纹效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 ">

    近来看到个不错的按钮点击效果,当点击时产生一次水波涟漪效果,挺好玩的,于是简单的实现了下(没考虑低版本浏览器兼容问题) 

    先看看效果吧,如下图(录制gif软件有点渣,看起来卡卡的...)

     

    这种效果可以由元素内嵌套canves实现,也可以由css3实现。 

    Canves实现 

    网上摘了一份canves实现的代码,略微去掉了些重复定义的样式并且给出js注释,代码如下 

    html代码:<a class="btn color-1 material-design" data-color="#2f5398">Press me!</a>

    css代码: 

    * {
     box-sizing: border-box;
     outline: none;
    }
    body {
     font-family: 'Open Sans';
     font-size: 100%;
     font-weight: 300;
     line-height: 1.5em;
     text-align: center;
    }
    .btn {
     border: none;
     display: inline-block;
     color: white;
     overflow: hidden;
     margin: 1rem;
     padding: 0;
     width: 150px;
     height: 40px;
     text-align: center;
     line-height: 40px;
     border-radius: 5px;
    }
    .btn.color-1 {
     background-color: #426fc5;
    }
    .btn-border.color-1 {
     background-color: transparent;
     border: 2px solid #426fc5;
     color: #426fc5;
    }
    .material-design {
     position: relative;
    }
    .material-design canvas {
     opacity: 0.25;
     position: absolute;
     top: 0;
     left: 0;
    }
    .container {
     align-content: center;
     align-items: flex-start;
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
     justify-content: center;
     margin: 0 auto;
     max-width: 46rem;
    }

    js代码 :

    var canvas = {},
      centerX = 0,
      centerY = 0,
      color = '',
      containers = document.getElementsByClassName('material-design')
      context = {},
      element = {},
      radius = 0,
      // 根据callback生成requestAnimationFrame动画
      requestAnimFrame = function () {
       return (
        window.requestAnimationFrame    || 
        window.mozRequestAnimationFrame  || 
        window.oRequestAnimationFrame   || 
        window.msRequestAnimationFrame   || 
        function (callback) {
         window.setTimeout(callback, 1000 / 60);
        }
       );
      } (),
      // 为每个指定元素生成canves
      init = function () {
       containers = Array.prototype.slice.call(containers);
       for (var i = 0; i < containers.length; i += 1) {
        canvas = document.createElement('canvas');
        canvas.addEventListener('click', press, false);
        containers[i].appendChild(canvas);
        canvas.style.width ='100%';
        canvas.style.height='100%';
        canvas.width = canvas.offsetWidth;
        canvas.height = canvas.offsetHeight;
       }
      },
      // 点击并且获取需要的数据,如点击坐标、元素大小、颜色
      press = function (event) {
       color = event.toElement.parentElement.dataset.color;
       element = event.toElement;
       context = element.getContext('2d');
       radius = 0;
       centerX = event.offsetX;
       centerY = event.offsetY;
       context.clearRect(0, 0, element.width, element.height);
       draw();
      },
      // 绘制圆形,并且执行动画
      draw = function () {
       context.beginPath();
       context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
       context.fillStyle = color;
       context.fill();
       radius += 2;
       // 通过判断半径小于元素宽度,不断绘制 radius += 2 的圆形
       if (radius < element.width) {
        requestAnimFrame(draw);
       }
      };
    
    init();
    

    CSS3实现 

    接下来就是纯手打的代码了...觉得还是css3实现的方便些,可能是css写习惯了... 

    html代码 

    <a class="waves ts-btn">Press me!</a>

    css代码 

    .waves{
      position:relative;
      cursor:pointer;
      display:inline-block;
      overflow:hidden;
      text-align: center;
      -webkit-tap-highlight-color:transparent;
      z-index:1;
    }
    .waves .waves-animation{
      position:absolute;
      border-radius:50%;
      width:25px;
      height:25px;
      opacity:0;
      background:rgba(255,255,255,0.3);
      transition:all 0.7s ease-out;
      transition-property:transform, opacity, -webkit-transform;
      -webkit-transform:scale(0);
      transform:scale(0);
      pointer-events:none
    }
    .ts-btn{
      width: 200px;
      height: 56px;
      line-height: 56px;
      background: #f57035;
      color: #fff;
      border-radius: 5px;
    }
    
    

    js代码 

     document.addEventListener('DOMContentLoaded',function(){
    
       var duration = 750;
    
       // 样式string拼凑
       var forStyle = function(position){
        var cssStr = '';
        for( var key in position){
         if(position.hasOwnProperty(key)) cssStr += key+':'+position[key]+';';
        };
        return cssStr;
       }
    
       // 获取鼠标点击位置
       var forRect = function(target){
        var position = {
         top:0,
         left:0
        }, ele = document.documentElement;
        'undefined' != typeof target.getBoundingClientRect && (position = target.getBoundingClientRect());
        return {
          top: position.top + window.pageYOffset - ele.clientTop,
          left: position.left + window.pageXOffset - ele.clientLeft
        }
       }
    
       var show = function(event){
        var pDiv = event.target,
         cDiv = document.createElement('div');
        pDiv.appendChild(cDiv);
        var rectObj = forRect(pDiv),
         _height = event.pageY - rectObj.top,
         _left = event.pageX - rectObj.left,
         _scale = 'scale(' + pDiv.clientWidth / 100 * 10 + ')';
        var position = {
         top: _height+'px',
         left: _left+'px'
        };
        cDiv.className = cDiv.className + " waves-animation",
        cDiv.setAttribute("style", forStyle(position)),
        position["-webkit-transform"] = _scale,
        position["-moz-transform"] = _scale,
        position["-ms-transform"] = _scale,
        position["-o-transform"] = _scale,
        position.transform = _scale,
        position.opacity = "1",
        position["-webkit-transition-duration"] = duration + "ms",
        position["-moz-transition-duration"] = duration + "ms",
        position["-o-transition-duration"] = duration + "ms",
        position["transition-duration"] = duration + "ms",
        position["-webkit-transition-timing-function"] = "cubic-bezier(0.250, 0.460, 0.450, 0.940)",
        position["-moz-transition-timing-function"] = "cubic-bezier(0.250, 0.460, 0.450, 0.940)",
        position["-o-transition-timing-function"] = "cubic-bezier(0.250, 0.460, 0.450, 0.940)",
        position["transition-timing-function"] = "cubic-bezier(0.250, 0.460, 0.450, 0.940)",
        cDiv.setAttribute("style", forStyle(position));
        var finishStyle = {
         opacity: 0,
         "-webkit-transition-duration": duration + "ms",  // 过渡时间
         "-moz-transition-duration": duration + "ms",
         "-o-transition-duration": duration + "ms",
         "transition-duration": duration + "ms",
         "-webkit-transform" : _scale,
         "-moz-transform" : _scale,
         "-ms-transform" : _scale,
         "-o-transform" : _scale,
         top: _height + "px",
         left: _left + "px",
        };
        setTimeout(function(){
         cDiv.setAttribute("style", forStyle(finishStyle));
         setTimeout(function(){
          pDiv.removeChild(cDiv);
         },duration);
        },100)
       }
       document.querySelector('.waves').addEventListener('click',function(e){
        show(e);
       },!1);
      },!1);
    
    

    就这些,原理也简单,获取点击位置 >  添加样式   顺便,中秋快乐~

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持突袭网。

  • 本文相关:
  • 基于JS+Canves实现点击按钮水波纹效果
  • Bootstrap 3的box-sizing样式导致UEditor控件的图片无法正常缩放的解决方案
  • AngularJs 动态加载??楹鸵览?/a>
  • Javascript函数中的arguments.callee用法实例分析
  • Javascript中函数名.length属性用法分析(对比arguments.length)
  • jQuery中show与hide方法用法示例
  • jQuery中slidedown与slideup方法用法示例
  • jQuery中fadein与fadeout方法用法示例
  • jQuery使用animate实现ul列表项相互飘动效果示例
  • jQuery实现磁力图片跟随效果完整示例
  • 免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 彩票双色球历史开奖结果 - 频道导航
    Copyright © 2017 彩票双色球历史开奖结果 www.s9h6.com All Rights Reserved
  • 新规:续航150公里以下新能源车取消补贴 2019-10-11
  • 法国革命时代,女人流行穿什么 2019-10-11
  • 黑龙江省县(市、区)委统战部长培训班举办 2019-10-06
  • “夏季第一瓜”竟是它! 2019-10-06
  • 《阿古顿巴》藏语版在藏语卫视首播 2019-09-06
  • 晋中市“三同步”推动互联网治理创新 2019-08-27
  • 法媒:研究称美国人常用药物或增加抑郁风险 2019-08-27
  • 宝贝是地名,你能想到这么浪漫的地名在哪儿吗? 2019-08-15
  • 何树山副省长到方圆机电调研指导工作 2019-08-15
  • 双色球媒体汇总500彩网 金沙电玩城在哪里下载 必威体育客服窗口 黑龙江时时彩开奖结果2 浙江体彩6十1奖结果 浙江福彩15选五走势图超长版 大乐透规则调整 围棋少年片尾曲 组选包胆中奖规则 彩友网 辽宁快乐12奖金表 曾道人一句话特码 天津11选5基本走势图 双色球基本走势图100期 快乐12开奖结果