资讯专栏INFORMATION COLUMN

Material Design for Bootstrap

Ocean / 2782人阅读

摘要:第二次修改源码已放到由于无法解决事件不能获取焦点标签的坐标位置,所以只能用事件,而不能用类事件防止事件的滥用,改用事件核心样式持续更新,也可以根据自己喜欢的样式重新定义

简单几行代码,就可以给bs框架添加Material Design风格

效果图:

demo: http://jsoncode.github.io/mat...

这是常见的btn加了Material Design效果
这里采用的是bootstrap4

引入:bs.css

你可能看到上面多了一个materialDesign属性,对,等下我们就通过这个属性来实现material Design效果

css:

[materialDesign] {
    display: inline-block;
    letter-spacing: .8px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.animate-hand{
    height: 134px;
    width: 134px;
    display: block;
    position: absolute;
    background: currentColor;
    opacity: 0.6;
    border-radius: 100%;
    -webkit-transform: scale(0);
    transform: scale(0);
    z-index: 0;
}
.animate-hand.animate {
    -webkit-animation: ripple .5s linear;
    animation: ripple .5s linear;
}

@-webkit-keyframes ripple {
    100% {
        opacity: 0;
        -webkit-transform: scale(4.5);
        transform: scale(4.5);
    }
}

@keyframes ripple {
    100% {
        opacity: 0;
        -webkit-transform: scale(4.5);
        transform: scale(4.5);
    }
}

js:

(function() {
    for (var i = 0, btn; btn = document.querySelectorAll("[materialDesign]")[i++];) {
        btn.addEventListener("click", function(e) {
            var tag = this;
            if (this.getAttribute("materialDesign") === undefined) {
                tag = this.parentNode;
            }
            var div = tag.querySelector(".animate-hand");
            if (!div) {
                div = document.createElement("div");
                tag.appendChild(div);
            }
            div.className = "animate-hand";
            var x = e.pageX;
            var y = e.pageY;
            var left = tag.offsetLeft;
            var top = tag.offsetTop;
            var height = div.offsetHeight;
            var width = div.offsetWidth;
            div.className = "";

            div.style.left = x - left - width / 2 + "px";
            div.style.top = y - top - height / 2 + "px";
            div.className = "animate-hand animate";
        });
    }
})();

搞定,只要在任意一个标签上添加materialDesign属性,即可实现该效果

更多特效后续上传。

第二次修改:
源码已放到github:https://github.com/jsoncode/m...

由于无法解决touch事件不能获取焦点标签的坐标位置,所以只能用click事件,而不能用touch类事件
防止click事件的滥用,改用mousedown事件
核心js:
(function() {
    "use strict";
    document.addEventListener("DOMContentLoaded", DOMContentLoaded, false);
    function DOMContentLoaded() {
        for (var i = 0, btn; btn = document.querySelectorAll("[materialDesign]")[i++];) {
            btn.addEventListener("mousedown", materialDesignBg);
        }
    }
    function materialDesignBg(e) {
        e.preventDefault();
        e.stopPropagation();
        var tag = this;
        var div = tag.querySelector(".animate-hand");
        if (!div) {
            div = document.createElement("div");
        }
        div.className = "animate-hand";
        tag.insertBefore(div, tag.firstElementChild);

        var scale = Math.round(tag.offsetWidth / 100) || 1;
        var left = e.layerX;
        var top = e.layerY;

        div.style.left = left + "px";
        div.style.top = top + "px";
        scale = scale > 6 ? 6 : scale;
        div.className = "animate-hand animate ripple_" + (e.changedTouches ? scale + 1 : scale);
        if (tag.nodeName != "A" && tag.getAttribute("href")) {
            location.href = tag.getAttribute("href");
        }
        return false;
    }
})();

样式持续更新,也可以根据自己喜欢的样式重新定义bootstrap

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

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

相关文章

  • Top 15 - Material Design框架和类库(译)

    摘要:这是一个用于构建响应式应用和网站的前端框架。是基于设计的一套丰富的组件。这是一个对混合式手机应用框架的扩展库。到目前为止它仅大小,而且不依赖于任何第三方的插件,它可以很轻量的被用来创建和应用。 _Material design_是Google开发的,目的是为了统一公司的web端和手机端的产品风格。它是基于很多的原则,比如像合适的动画,响应式,以及颜色和阴影的使用。完整的指南详情请看这里...

    Cristic 评论0 收藏0
  • Top 15 - Material Design框架和类库(译)

    摘要:这是一个用于构建响应式应用和网站的前端框架。是基于设计的一套丰富的组件。这是一个对混合式手机应用框架的扩展库。到目前为止它仅大小,而且不依赖于任何第三方的插件,它可以很轻量的被用来创建和应用。 _Material design_是Google开发的,目的是为了统一公司的web端和手机端的产品风格。它是基于很多的原则,比如像合适的动画,响应式,以及颜色和阴影的使用。完整的指南详情请看这里...

    phpmatt 评论0 收藏0
  • Material Design for Bootstrap

    摘要:第二次修改源码已放到由于无法解决事件不能获取焦点标签的坐标位置,所以只能用事件,而不能用类事件防止事件的滥用,改用事件核心样式持续更新,也可以根据自己喜欢的样式重新定义 简单几行代码,就可以给bs框架添加Material Design风格 效果图:showImg(https://segmentfault.com/img/bVx7b9?w=336&h=83); demo: http://...

    fasss 评论0 收藏0
  • 搜集React、Vue、Angular和传统UI组件库以及后台管理平台模板

    摘要:高颜值好用易扩展的微信小程序库,有赞。一套高质量的微信小程序组件库。用和搭建的一个通用管理后台基于实现的后台管理系统模板一个后台管理系统模板是一套组件化框架,支持定制主题,主要服务于前台及中后台产品。基于后台管理系统。 快来Star,在这里哦Awesome UIKit。 showImg(https://segmentfault.com/img/remote/14600000059942...

    zhangrxiang 评论0 收藏0

发表评论

0条评论

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