码迷,mamicode.com
首页 > Web开发 > 详细

materializecss的水波纹效果

时间:2018-05-23 19:06:58      阅读:335      评论:0      收藏:0      [点我收藏+]

标签:getattr   pop   leave   div   颜色   another   ice   gen   bsp   

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    p {
        height: 100px;
        line-height: 100px;
        text-align: center;
        width: 100px;
        background-color: #ccc;
    }
    /* Firefox Bug: link not triggered */

    .waves-effect .waves-ripple {
        z-index: -1;
    }

    .waves-effect {
        position: relative;
        cursor: pointer;
        display: inline-block;
        overflow: hidden;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        -webkit-tap-highlight-color: transparent;
        vertical-align: middle;
        z-index: 1;
        -webkit-transition: .3s ease-out;
        transition: .3s ease-out;
    }

    .waves-effect .waves-ripple {
        position: absolute;
        border-radius: 50%;
        width: 20px;
        height: 20px;
        margin-top: -10px;
        margin-left: -10px;
        opacity: 0;
        background: rgba(0, 0, 0, 0.2);
        -webkit-transition: all 0.7s ease-out;
        transition: all 0.7s ease-out;
        -webkit-transition-property: opacity, -webkit-transform;
        transition-property: opacity, -webkit-transform;
        transition-property: transform, opacity;
        transition-property: transform, opacity, -webkit-transform;
        -webkit-transform: scale(0);
        transform: scale(0);
        pointer-events: none;
    }
    /*.waves-light此类class是wave颜色*/

    .waves-effect.waves-light .waves-ripple {
        background-color: rgba(255, 255, 255, 0.45);
    }

    .waves-effect.waves-red .waves-ripple {
        background-color: rgba(244, 67, 54, 0.7);
    }

    .waves-effect.waves-yellow .waves-ripple {
        background-color: rgba(255, 235, 59, 0.7);
    }

    .waves-effect.waves-orange .waves-ripple {
        background-color: rgba(255, 152, 0, 0.7);
    }

    .waves-effect.waves-purple .waves-ripple {
        background-color: rgba(156, 39, 176, 0.7);
    }

    .waves-effect.waves-green .waves-ripple {
        background-color: rgba(76, 175, 80, 0.7);
    }

    .waves-effect.waves-teal .waves-ripple {
        background-color: rgba(0, 150, 136, 0.7);
    }

    .waves-effect img {
        position: relative;
        z-index: -1;
    }
    </style>
</head>

<body>
    
    <p class="waves-effect waves-orange">ppppp</p>
    
    <script>
     if (ontouchstart in window) {
            document.body.addEventListener(touchstart, showEffect, false);
        }
    document.body.addEventListener(mousedown, showEffect, false);
    var TouchHandler = {
        /* uses an integer rather than bool so there‘s no issues with
         * needing to clear timeouts if another touch event occurred
         * within the 500ms. Cannot mouseup between touchstart and
         * touchend, nor in the 500ms after touchend. */
        touches: 0,
        allowEvent: function(e) {
            var allow = true;

            if (e.type === touchstart) {
                TouchHandler.touches += 1; //push
            } else if (e.type === touchend || e.type === touchcancel) {
                setTimeout(function() {
                    if (TouchHandler.touches > 0) {
                        TouchHandler.touches -= 1; //pop after 500ms
                    }
                }, 500);
            } else if (e.type === mousedown && TouchHandler.touches > 0) {
                allow = false;
            }

            return allow;
        },
        touchup: function(e) {
            TouchHandler.allowEvent(e);
        }
    };
    var Effect = {
        // Effect delay
        duration: 750,

        show: function(e, element) {

            // Disable right click
            if (e.button === 2) {
                return false;
            }

            var el = element || this;

            // Create ripple
            var ripple = document.createElement(div);
            ripple.className = waves-ripple;
            el.appendChild(ripple);

            // Get click coordinate and element witdh
            var pos = offset(el);
            var relativeY = e.pageY - pos.top;
            var relativeX = e.pageX - pos.left;
            var scale = scale( + el.clientWidth / 100 * 10 + );

            // Support for touch devices
            if (touches in e) {
                relativeY = e.touches[0].pageY - pos.top;
                relativeX = e.touches[0].pageX - pos.left;
            }

            // Attach data to element
            ripple.setAttribute(data-hold, Date.now());
            ripple.setAttribute(data-scale, scale);
            ripple.setAttribute(data-x, relativeX);
            ripple.setAttribute(data-y, relativeY);

            // Set ripple position
            var rippleStyle = {
                top: relativeY + px,
                left: relativeX + px
            };

            ripple.className = ripple.className +  waves-notransition;
            ripple.setAttribute(style, convertStyle(rippleStyle));
            ripple.className = ripple.className.replace(waves-notransition, ‘‘);

            // Scale the ripple
            rippleStyle[-webkit-transform] = scale;
            rippleStyle[-moz-transform] = scale;
            rippleStyle[-ms-transform] = scale;
            rippleStyle[-o-transform] = scale;
            rippleStyle.transform = scale;
            rippleStyle.opacity = 1;

            rippleStyle[-webkit-transition-duration] = Effect.duration + ms;
            rippleStyle[-moz-transition-duration] = Effect.duration + ms;
            rippleStyle[-o-transition-duration] = Effect.duration + ms;
            rippleStyle[transition-duration] = Effect.duration + ms;

            rippleStyle[-webkit-transition-timing-function] = cubic-bezier(0.250, 0.460, 0.450, 0.940);
            rippleStyle[-moz-transition-timing-function] = cubic-bezier(0.250, 0.460, 0.450, 0.940);
            rippleStyle[-o-transition-timing-function] = cubic-bezier(0.250, 0.460, 0.450, 0.940);
            rippleStyle[transition-timing-function] = cubic-bezier(0.250, 0.460, 0.450, 0.940);

            ripple.setAttribute(style, convertStyle(rippleStyle));
        },

        hide: function(e) {
            TouchHandler.touchup(e);

            var el = this;
            var width = el.clientWidth * 1.4;

            // Get first ripple
            var ripple = null;
            var ripples = el.getElementsByClassName(waves-ripple);
            if (ripples.length > 0) {
                ripple = ripples[ripples.length - 1];
            } else {
                return false;
            }

            var relativeX = ripple.getAttribute(data-x);
            var relativeY = ripple.getAttribute(data-y);
            var scale = ripple.getAttribute(data-scale);

            // Get delay beetween mousedown and mouse leave
            var diff = Date.now() - Number(ripple.getAttribute(data-hold));
            var delay = 350 - diff;

            if (delay < 0) {
                delay = 0;
            }

            // Fade out ripple after delay
            setTimeout(function() {
                var style = {
                    top: relativeY + px,
                    left: relativeX + px,
                    opacity: 0,

                    // Duration
                    -webkit-transition-duration: Effect.duration + ms,
                    -moz-transition-duration: Effect.duration + ms,
                    -o-transition-duration: Effect.duration + ms,
                    transition-duration: Effect.duration + ms,
                    -webkit-transform: scale,
                    -moz-transform: scale,
                    -ms-transform: scale,
                    -o-transform: scale,
                    transform: scale
                };

                ripple.setAttribute(style, convertStyle(style));

                setTimeout(function() {
                    try {
                        el.removeChild(ripple);
                    } catch (e) {
                        return false;
                    }
                }, Effect.duration);
            }, delay);
        }
    }

    function showEffect(e) {
        var element = getWavesEffectElement(e);
        if (element !== null) {
            Effect.show(e, element);

            if (ontouchstart in window) {
                element.addEventListener(touchend, Effect.hide, false);
                element.addEventListener(touchcancel, Effect.hide, false);
            }

            element.addEventListener(mouseup, Effect.hide, false);
            element.addEventListener(mouseleave, Effect.hide, false);
            element.addEventListener(dragend, Effect.hide, false);
        }
    };

    function getWavesEffectElement(e) {

        if (TouchHandler.allowEvent(e) === false) {
            return null;
        }

        var element = null;
        var target = e.target || e.srcElement;

        while (target.parentNode !== null) {
            if (!(target instanceof SVGElement) && target.className.indexOf(waves-effect) !== -1) {
                element = target;
                break;
            }
            target = target.parentNode;
        }
        return element;
    }

    function offset(elem) {
        var docElem,
            win,
            box = { top: 0, left: 0 },
            doc = elem && elem.ownerDocument;

        docElem = doc.documentElement;

        if (typeof elem.getBoundingClientRect !== typeof undefined) {
            box = elem.getBoundingClientRect();
        }
        win = getWindow(doc);
        return {
            top: box.top + win.pageYOffset - docElem.clientTop,
            left: box.left + win.pageXOffset - docElem.clientLeft
        };
    }

    function isWindow(obj) {
        return obj !== null && obj === obj.window;
    }

    function getWindow(elem) {
        return isWindow(elem) ? elem : elem.nodeType === 9 && elem.defaultView;
    }

    function convertStyle(obj) {
        var style = ‘‘;

        for (var a in obj) {
            if (obj.hasOwnProperty(a)) {
                style += a + : + obj[a] + ;;
            }
        }

        return style;
    }
    </script>
    
</body>

</html>

 

materializecss的水波纹效果

标签:getattr   pop   leave   div   颜色   another   ice   gen   bsp   

原文地址:https://www.cnblogs.com/hill-foryou/p/9078258.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!