原生js與angularJS實現(xiàn)點擊出現(xiàn)水紋的效果

最近看到了AngularJS-material的網(wǎng)站，看到里面有一個點擊出現(xiàn)水紋的效果，非常漂亮?？梢钥吹近c擊上面的元素的時候，元素會出現(xiàn)水波蕩漾的效果，我想了一下實現(xiàn)原理，主要借助CSS3的<code>transform:scale()</code>來實現(xiàn)的。<p>如下圖

水紋效果.png

首先介紹一下原理，第一步是在點擊元素中動態(tài)添加一個<code>span</code>標簽，然后為這個標簽設置初始類名和相對于父節(jié)點的位置。這里需要有兩點注意：（1）初始類名，要讓添加<code>span</code>標簽縮放為0，代碼如下：

-webkit-transform: scale(0);
-moz-transform: scale(0);
-ms-transform: scale(0);
-o-transform: scale(0);
transform: scale(0)

（2）要通過監(jiān)聽事件來實現(xiàn)動態(tài)改變添加<code>span</code>標簽的位置，讓其永遠位于鼠標點擊的中點。代碼如下

x=event.pageX-this.offsetLeft-CSS(span,'width')/2;
y=event.pageY-this.offsetTop-CSS(span,'height')/2;

第二步是每次在動態(tài)添加這個<code>span</code>標簽的時候，都要把上一個添加的刪除，讓其新添加的時候，可以繼續(xù)添加類名。<p>
第三步是通過CSS3的方式實現(xiàn)水紋的效果，代碼如下：

.animate{
    -webkit-animation: ripple .5s linear;
    -moz-animation: ripple .5s linear;
    -ms-animation: ripple .5s linear;
    -o-animation: ripple .5s linear;
    animation: ripple .5s linear
}
@-webkit-keyframes ripple {
    100% {
        opacity: 0;
        -webkit-transform: scale(1.5)
    }
}
@-moz-keyframes ripple {
    100% {
        opacity: 0;
        -moz-transform: scale(0.5)
    }
}
@-o-keyframes ripple {
    100% {
        opacity: 0;
        -o-transform: scale(0.5)
    }
}
@keyframes ripple {
    100% {
        opacity: 0;
        transform: scale(0.5)
    }
}

下面是兩種實現(xiàn)方式，第一種是原生js實現(xiàn)的，第二種是通過angularJS實現(xiàn)的。下面是效果

實現(xiàn)效果.png

原生JS實現(xiàn)代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<style>
    #content{
        width: 200px;
        height: 50px;
        border: 1px solid gray;
        background: slateblue;
        position: absolute;
        left: 123px;
        top: 321px;
        overflow: hidden;
    }
    .animate{
        -webkit-animation: ripple .5s linear;
        -moz-animation: ripple .5s linear;
        -ms-animation: ripple .5s linear;
        -o-animation: ripple .5s linear;
        animation: ripple .5s linear
    }
    #content #spanStyle{
        border-radius: 75px;
        position: absolute;
        background: salmon;
        -webkit-transform: scale(0);
        -moz-transform: scale(0);
        -ms-transform: scale(0);
        -o-transform: scale(0);
        transform: scale(0)
    }

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

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

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

    @keyframes ripple {
        100% {
            opacity: 0;
            transform: scale(0.5)
        }
    }
</style>
<body>
    <div id="content">

    </div>
</body>
<script>
    window.onload= function () {
        var content=document.getElementById("content");
        var eventHandle= function (obj,type,fn) {
            if(obj.addEventListener){
                obj.addEventListener(type,fn,false)
            }else if(obj.attachEvent){
                obj.attachEvent('on'+type,fn)
            }
        };
        var setCSS3=function(obj,attr,value){
            var sTr="";
            var sVal="";
            var arr=["Webkit","Moz","O","ms",""];
            if(! obj["$Transform"])
            {
                obj["$Transform"]={};
            }
            obj["$Transform"][attr]=parseInt(value);
            for( sTr in obj["$Transform"])
            {
                switch(sTr)
                {
                    case 'scale':
                    case 'scaleX':
                    case 'scaleY':
                        sVal+=sTr+"("+(obj["$Transform"][sTr]/100)+") ";
                        break;
                    case 'rotate':
                    case 'rotateX':
                    case 'rotateY':
                        sVal+=sTr+"("+(obj["$Transform"][sTr])+"deg) ";
                        break;
                    case 'translateX':
                    case 'translateY':
                    case 'translateZ':
                        sVal+=sTr+"("+(obj["$Transform"][sTr])+"px) ";
                        break;
                }
            }
            for(var i=0;i<arr.length;i++)
            {
                obj.style[arr[i]+"Transform"]=sVal;
            }
        };
        var CSS= function (obj,attr,value) {
            if(arguments.length==2){//查看有有幾個參數(shù)，如果有兩個參數(shù)就執(zhí)行，此時為獲取css屬性值
                if(attr=='scale'|| attr=='rotate'|| attr=='rotateX'||attr=='rotateY'||attr=='scaleX'||attr=='scaleY'||attr=='translateY'||attr=='translateX')//如果是css3中的屬性
                {
                    if(! obj.$Transform)
                    {
                        obj.$Transform={};
                    }
                    switch(attr)
                    {
                        case 'scale':
                        case 'scaleX':
                        case 'scaleY':
                            return typeof(obj.$Transform[attr])=='number'?obj.$Transform[attr]:100;//判斷obj.$Transform[attr]是否屬于number類型，如果是就返回相應值
                            break;
                        default:
                            return obj.$Transform[attr]?obj.$Transform[attr]:0;
                    }
                }//如果不是CSS3樣式
                var sCur=obj.currentStyle?obj.currentStyle[attr]:document.defaultView.getComputedStyle(obj, false)[attr];//傳統(tǒng)css屬性返回
                if(attr=='opacity'){
                    return Math.round((parseFloat(sCur)*100));
                }
                else{
                    return parseInt(sCur);
                }
            }
            else if(arguments.length==3)//如果有3個參數(shù)，此時為設置css屬性
            {
                switch(attr){ //如果為css3屬性，就用css3設置函數(shù)。
                    case 'scale':
                    case 'scaleX':
                    case 'scaleY':
                    case 'rotate':
                    case 'rotateX':
                    case 'rotateY':
                    case 'translateZ':
                    case 'translateX':
                    case 'translateY':
                        setCss3(obj, attr, value);
                        break;
                    case 'width':
                    case 'height':
                    case 'paddingLeft':
                    case 'paddingTop':
                    case 'paddingRight':
                    case 'paddingBottom':
                        value=Math.max(value,0);
                    case 'left':
                    case 'top':
                    case 'marginLeft':
                    case 'marginTop':
                    case 'marginRight':
                    case 'marginBottom':
                        if(typeof value=="string")
                        {
                            obj.style[attr]=value;
                        }
                        else
                        {
                            obj.style[attr]=value+'px';
                        }
                        break;
                    case 'opacity':
                        obj.style.filter="alpha(opacity:"+value+")";
                        obj.style.opacity=value/100;
                        break;
                    default:
                        obj.style[attr]=value;
                }
            }
            return function (attr_in, value_in){css(obj, attr_in, value_in)};
        };
        var hasClassName=function(obj,className){
            var isSpourtClassList='classList' in document.documentElement;
            if(isSpourtClassList){
                return obj.classList.contains(className)
            }else{
                var isContain=obj.className.indexOf(className)>-1;
                return isContain;
            }
        };
        var addClass= function (obj,className) {
            var isSpourtClassList='classList' in document.documentElement;
            if(isSpourtClassList){
                if(hasClassName(obj,className)!=true){
                    obj.classList.add(className)
                }
            }else{
                if(hasClassName(obj,className)!=true){
                    obj.className+=obj.className
                }
            }
        };
        var removeClass= function (obj, className) {
            var isSpourtClassList='classList' in document.documentElement;
            if(isSpourtClassList){
                if(hasClassName(obj,className)){
                    obj.classList.remove(className)
                }
            }else{
                if(hasClassName(obj,className)){
                    obj.className-=obj.className
                }
            }
        }
        var animate= function (target) {
            this.obj=target;
        };
        animate.prototype={
            addEffect: function () {
                var that=this;
                var span=document.createElement("span");
                span.setAttribute("id","spanStyle");
                //var spanRemove=that.obj.
                eventHandle(that.obj,'click', function (e) {
                    var event=e ||window.event;
                    var x;
                    var y;
                    var spanS=document.getElementById("spanStyle");
                    if(spanS){
                        that.obj.removeChild(spanS);
                    }
                    that.obj.appendChild(span);
                    CSS(span,"width",150);
                    CSS(span,"height",150);
                    x=event.pageX-this.offsetLeft-CSS(span,'width')/2;
                    y=event.pageY-this.offsetTop-CSS(span,'height')/2;
                    CSS(span,"left",x);
                    CSS(span,"top",y);
                    addClass(span,"animate");

                },false)
            },
            removeEffect: function () {

            }
        };

        state.changeFront(new animate(content));//調(diào)用一次只產(chǎn)生一個span

    };
    var state= function () {//狀態(tài)控制函數(shù)
        var currentState=null;
        return{
            changeFront: function (handle) {
                    currentState=handle;
                    currentState.addEffect();
            },
            changeBack: function (handle) {
                    currentState=handle;
                    currentState.removeEffect();

            }
        }
    }()
</script>
</html>

AngularJS實現(xiàn)方法：

<!DOCTYPE html>
<html lang="en" ng-app="animateDemo">
<head>
    <meta charset="UTF-8">
    <title></title>
  <script src="lib/angular.min.js" type="text/javascript"></script>
  <script src="lib/angular-animate.js" type="text/javascript"></script>
  <script src="lib/jquery-2.1.4.min.js" type="text/javascript"></script>
  <style>
    .spanStyle{
      width: 200px;
      height: 50px;
      position: absolute;
      left: 200px;
      top: 60px;
      background: slateblue;
      overflow: hidden;
    }
    .spanStyle .animateSpan{
      position: absolute;
      background: saddlebrown;
      display: block;
      width: 50px;
      height: 50px;
      border-radius: 100%;
      -webkit-transform: scale(0);
      -moz-transform: scale(0);
      -ms-transform: scale(0);
      -o-transform: scale(0);
      transform: scale(0);
    }
    .animate{
      -webkit-animation: ripple .5s linear;
      -moz-animation: ripple .5s linear;
      -ms-animation: ripple .5s linear;
      -o-animation: ripple .5s linear;
      animation: ripple .5s linear
    }
    @-webkit-keyframes ripple {
      100%{
        opacity: 0;
        -webkit-transform: scale(1.5);
      }
    }
    @-moz-keyframes ripple {
      100%{
        opacity: 0;
        -moz-transform: scale(1.5);
      }
    }
    @-o-keyframes ripple {
      100%{
        opacity: 0;
        -o-transform: scale(1.5);
      }
    }
    @keyframes ripple {
      100%{
        opacity: 0;
        transform: scale(1.5);
      }
    }
  </style>
</head>
<body ng-controller="animateController">
  <div>
    <span-click></span-click>
  </div>
</body>
<script>
  var app=angular.module('animateDemo',["templateCache","serviceModule","directiveModule"])
    .controller("animateController",['$scope','createEffect', function ($scope,createEffect) {

    }])
  var service=angular.module("serviceModule",[])
    .factory("createEffect",["$animate","$compile","$rootScope", function ($animate,$compile,$rootScope) {
      var x;
      var y;
      var span=angular.element("<span class='animateSpan'></span>");
      var scopeNew=$rootScope.$new(true);
      var spanEffect=$compile(span)(scopeNew);
      return{
        addEffect: function (obj) {
          obj.on("click", function (e) {
            var e=e||event;
            obj.empty();
            $animate.enter(spanEffect,obj);
            x= e.pageX-this.offsetLeft-parseInt($(obj).find("span").css("width"))/2;
            y= e.pageY-this.offsetTop-parseInt($(obj).find("span").css("width"))/2;
            $(obj).find("span").css("left",x);
            $(obj).find("span").css("top",y);
            obj.find("span").addClass("animate");
          })
        }
      }

    }])
    var directive=angular.module("directiveModule",["serviceModule"])
    .directive("spanClick",["$animate","$compile","createEffect", function ($animate,$compile,createEffect) {
      return{
        restrict:'EA',
        replace:true,
        templateUrl:'spanClick.html',
        link: function (scope, ele, attr) {
        /*  var x;
          var y;
          var span=angular.element("<span class='animateSpan'></span>");
          //span.attr("class","animateSpan");
          var scopeNew=scope.$new(true);
          var spanEffect=$compile(span)(scopeNew);
          ele.bind("click", function (e) {
            ele.empty();
            $animate.enter(spanEffect,ele);
            x= e.pageX-this.offsetLeft-parseInt($(ele).find("span").css("width"))/2;
            y= e.pageY-this.offsetTop-parseInt($(ele).find("span").css("width"))/2;
            $(ele).find("span").css("left",x);
            $(ele).find("span").css("top",y);
            ele.find("span").addClass("animate");
          })*/
          createEffect.addEffect(ele)
        }
      }
    }])
  var templateCache=angular.module('templateCache',[])
    .run(function ($templateCache) {
      $templateCache.put("spanClick.html","<div  class='spanStyle'></div>")
    })
</script>
</html>
最后編輯于 ：
?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關閱讀更多精彩內(nèi)容

  • Spring Cloud為開發(fā)人員提供了快速構建分布式系統(tǒng)中一些常見模式的工具（例如配置管理，服務發(fā)現(xiàn)，斷路器，智...
    卡卡羅2017閱讀 136,695評論 19贊 139
  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案？ 參考答案 (1)瀏覽器兼容問題一：不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 14,194評論 1贊 92
  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 179,326評論 25贊 708
  • 第5章 菜單、按鈕及導航 一、下拉菜單 小伙伴們注意，在Bootstrap框架中的下拉菜單組件是一個獨立的組件，根...
    凜0_0閱讀 5,334評論 0贊 66
  • 做夢也是一門藝術，對于自己來說，只要睡覺就會做夢，從來不覺得會影響睡眠，反而認為它是我生活當中必不可少的...
    星颯說閱讀 400評論 2贊 2

友情鏈接更多精彩內(nèi)容