资讯专栏INFORMATION COLUMN

波纹按钮实现

james / 829人阅读

摘要:实现原理关键属性画圆放大平滑过渡获取鼠标位置,动态态画圆,延时放大,完成后移除元素部分按钮样式原始波纹样式部分部分合并函数参数工具函数核心点击位置元素位置对象转化为字符串驼峰转连字符添加浏览器兼容前缀获得浏览器前缀

实现原理

关键属性 border-radius(画圆) transform(scale放大) transition(平滑过渡)
获取鼠标位置,动态态画圆,延时放大,完成后移除元素

css 部分

按钮样式

.btn {
         width: 200px;
         height: 56px;
         line-height: 56px;
         background: #426fc5;
         color: #fff;
         border-radius: 5px;
         text-align: center;
         cursor: pointer;
         overflow: hidden;
       }

原始波纹样式

.waves-animation {
       position: absolute;
       border-radius: 50%;
       width: 25px;
       height: 25px;
       background: rgba(255, 255, 255, 0.3);
       transition: all 750ms ease-out;
       transform: scale(0);
   }
html 部分
press me!
js 部分
(function (root, factory, plugName) {
        if (typeof define === "function" && define.amd) {
            define([], factory);
        } else if (typeof module === "object" && module.exports) {
            module.exports = factory();
        } else {
            root[plugName] = factory();
        }
    })(self, function () {
        //合并函数
        var __assign = Object.assign || function (t) {
            for (var s, i = 1, n = arguments.length; i < n; i++) {
                s = arguments[i];
                for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
            }
            return t;
        }

        // 参数
        var __options = {
            selector: ".btn"
        }

        // 工具函数
        var __utils = {
            $: function (selector) {
                return document.querySelector(selector)
            }
        }

        // 核心
        function core(options) {
            this.params = __assign(__options, options)
            this.Element = __utils.$(this.params.selector)
            this.Element.addEventListener("click", this.showWaves.bind(this))
        }

        core.prototype = {
            showWaves: function (e) {
                var insertDiv = document.createElement("div")
                insertDiv.className =insertDiv.className + " waves-animation"
                this.Element.appendChild(insertDiv)

                var _mousePos = this.mousePos(e),
                    _offset = this.offset(this.Element),
                    startCss = {
                        left: _mousePos.x - _offset.left + "px",
                        top: _mousePos.y - _offset.top + "px",
                        opacity: 1
                    },
                    finishCss = {
                        left: _mousePos.x - _offset.left + "px",
                        top: _mousePos.y - _offset.top + "px",
                        opacity: 0
                    }
                startCss[this.prefixStyle("transform")] = "scale(" + _offset.width / 25 + ")"
                finishCss[this.prefixStyle("transform")] = "scale(" + _offset.width / 25 * 2 + ")"

                insertDiv.setAttribute("style", this.getStyle(startCss));
                setTimeout(function () {
                    insertDiv.setAttribute("style", this.getStyle(finishCss));
                    setTimeout(function () {
                        this.Element.removeChild(insertDiv)
                    }.bind(this), 750)
                }.bind(this), 100)
            },
            //点击位置
            mousePos: function (e) {
                return {
                    x: e.pageX,
                    y: e.pageY
                };
            },
            // 元素位置
            offset: function (element) {
                return {
                    top: element.getBoundingClientRect().top,
                    left: element.getBoundingClientRect().left,
                    width: element.getBoundingClientRect().width
                }
            },
            // 对象转化为css字符串
            getStyle: function (object) {
                var cssStr = ""
                for (var key in object) {
                    cssStr += key + ":" + object[key] + ";"
                }
                return cssStr
            },
            // 驼峰转连字符
            toCSSStr(str){
                return str.replace(/([A-Z])/g,"-$1").toLowerCase();
            },
            //js 添加浏览器兼容前缀
            prefixStyle(style) {
                var vendor = this.vendor()
                if (!vendor) {
                    return false
                }
                if (vendor === "standard") {
                    return style
                }
                // return vendor + style.charAt(0).toUpperCase() + style.substr(1);
                return "-" + vendor + "-" + style;
            },
            // 获得浏览器前缀
            vendor: function () {
                var elementStyle = document.createElement("div").style;
                var transformNames = {
                    webkit: "webkitTransform",
                    Moz: "MozTransform",
                    O: "OTransform",
                    ms: "msTransform",
                    standard: "transform"
                }
                for (var key in transformNames) {
                    if (elementStyle[transformNames[key]] !== "undefined") {
                        return key
                    }
                }
                return false
            }
        }
        return core
    }, "wavesBtn")
    new wavesBtn()

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/95724.html

相关文章

  • 波纹按钮实现

    摘要:实现原理关键属性画圆放大平滑过渡获取鼠标位置,动态态画圆,延时放大,完成后移除元素部分按钮样式原始波纹样式部分部分合并函数参数工具函数核心点击位置元素位置对象转化为字符串驼峰转连字符添加浏览器兼容前缀获得浏览器前缀 实现原理 关键属性 border-radius(画圆) transform(scale放大) transition(平滑过渡)获取鼠标位置,动态态画圆,延时放大,完成后移除...

    Riddler 评论0 收藏0
  • css动画-实现一个最简单的水波纹效果button

    摘要:类似的效果步骤在页面写出一个并赋予简单的样式代码这是一个按钮默认是无法用给它居中为了增加用户体验为了保持和的位置关系为了遮盖超出的效果添加水波纹的基础样式代码为了保持和的位置关系水波纹圆形水波纹颜色下面与动画效果相关是时候的状态默认 类似material-ui的button效果 步骤 1. 在页面写出一个button 并赋予简单的样式 代码 这是一个按钮 ...

    Hancock_Xu 评论0 收藏0
  • 原生js+css 实现 material design 点击效果

    摘要:最近想要在按钮上添加的点击效果,看了看,单纯的想要这种效果,而要引入一些不必要的内容觉得不划算,然后自己动手造了个轮子。项目地址上传不了图只能用了效果使用文字只要在内添加并且在内传入便可以实现水波纹效果。 最近想要在按钮上添加material design的点击效果,看了看muse-ui,单纯的想要这种效果,而要引入一些不必要的内容觉得不划算,然后自己动手造了个轮子。项目地址:gith...

    NickZhou 评论0 收藏0
  • 原生js+css 实现 material design 点击效果

    摘要:最近想要在按钮上添加的点击效果,看了看,单纯的想要这种效果,而要引入一些不必要的内容觉得不划算,然后自己动手造了个轮子。项目地址上传不了图只能用了效果使用文字只要在内添加并且在内传入便可以实现水波纹效果。 最近想要在按钮上添加material design的点击效果,看了看muse-ui,单纯的想要这种效果,而要引入一些不必要的内容觉得不划算,然后自己动手造了个轮子。项目地址:gith...

    tolerious 评论0 收藏0

发表评论

0条评论

james

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<