您的位置:1010cc时时彩经典版 > 1010cc时时彩客户端 > JS实现运动缓冲效果的封装函数示例,JS封装通过

JS实现运动缓冲效果的封装函数示例,JS封装通过

发布时间:2019-08-26 07:51编辑:1010cc时时彩客户端浏览(134)

    JS作为值的函数用法示例,js函数用法示例

    正文实例陈诉了JS作为值的函数用法。分享给大家供大家参谋,具体如下:

    function callSomeFunction(someFunction,someArgument){
       return someFunction(someArgument);
    }
    

    本条函数接受七个参数,第4个函数应该是多个函数,第贰个参数应该是要传送给该函数的一个值.该函数是通用的.

    如:

    function add10(num){
      return num 10;
    }
    var result = callSomeFunction(add10,10);
    alert(result) //20
    

    从多少个函数中回到另八个函数(一种极为有用的技巧),如:

    创办二个比较函数:

    function createComparisonFunction(propertyName){
       return function (object1,object2){
           var value1 = object1[propertyName];
            var value2 = object2[propertyName];
            if(value1 < value2){
               return -1;
            } else if(value1 > value2){
               return 1;
            } else{
               return 0;
            }
       };
    }
    

    使用比方:

    var data = [{name:"Zachary",age:28},{name:"Nicholas",age:29}];
    data.sort(createComparisonFunction("name"));
    alert(data[0].name); //Nicholas
    data.sort(createComparisonFunction("age"));
    alert(data[0].name); //Zachary
    

    更加多关于JavaScript相关内容感兴趣的读者可查阅本站专项论题:《JavaScript切换特效与本事总结》、《JavaScript查找算法本事总结》、《JavaScript动画特效与手艺汇总》、《JavaScript错误与调解技艺总括》、《JavaScript数据结构与算法技巧总计》、《JavaScript遍历算法与工夫计算》及《JavaScript数学运算用法总结》

    但愿本文所述对大家JavaScript程序设计有所辅助。

    本文实例陈述了JS作为值的函数用法。分享给我们供我们参照他事他说加以考察,具体如下: function callSomeFunction...

    JS事件增添和移出的合作写法示例,js移出写法示例

    本文实例呈报了JS事件加多和移出的十一分写法。分享给我们供我们仿照效法,具体如下:

    var EventUtil = {
      addHandler : function (element , type, handler {
         if ( element.addEventListener){
            element.addEventListener(type, handler, false);
          }else if ( element.attachEvent) {
            element.attachEvent("on" type,handler);
          }else {
             element["on"   type] = handler;
          }
        },
      getEvent : function (event){
          return event ? event : window.event;
         },
       preventDefault : function(event){
          if(event.preventDefault){
             event.preventDefault();
          }else{
             event.returnValue = false;
          }
       },
      removeHandsler : function (element , type , handler){
         if(element.removeEventListener){
             element.removeEventListener(type , handler , false);
         }else if(element.detachEvent){
             element.detachEvent("on"   type , handler);
         }else{
             element["on"   type] = handler;
         }
        }
       stopPropagation : function(event){
          if(event.stopPropagation){
             event.stopPropagation();
          }else {
              event.cancelBubble = true;
          }
        },
       getRelatedTarget : function(event){
          if(event.relatedTarget){
              return event.relatedTarget;
          }else if (event.toElement){
              return event.toElement;
          }else if(event.fromElement){
              return event.fromElement;
          }esle {
              return null;
           }
        },
        getButton : function (event){
           if(document.implementation.hasFeature("MouseEvents" , "2.0")){
              return event.button;
           }else{
               switch(event.button){
                 case 0:
                 case 1:
                 case 3:
                 case 5:
                 case 7:
                   return 0;
                 case 2:
                 case 6:
                   return 2;
                 case 4:
                   return 1;
                }
            }
         }
    } ;
    

    在那之中,addHandler 和 removeHandsler 个方式首先都会检查测验传入的成分中是否留存DOM2级方法.如若存在DOM2级方法,则利用该方法:传入事件类型,事件管理程序函数和第4个参数fasle(表示冒泡阶段). 假使存在的是IE的不二法门,则动用第三种方案.注意此时的风浪类型必需抬高"on"前缀.最后一种恐怕正是使用DOM0级方法(在当代浏览器中,应该不会试行这里的代码). 此时,大家运用的是方括号语法来将属性名钦点为事件管理程序,可能将质量设置为null.

    能够像上面那样使用EventUtil对象:

    var btn = document.getElementById("myBtn");
    var handler = function(){
      alert("Clicked");
    };
    EventUtil.addHandler(btn , "click", handler);
    //略去其他代码
    EventUtil.removeHandler(btn, "click", handler);
    

    更加多关于JavaScript相关内容感兴趣的读者可查阅本站专题:《JavaScript切换特效与技术计算》、《JavaScript查找算法工夫总括》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调整能力计算》、《JavaScript数据结构与算法工夫总括》、《JavaScript遍历算法与技术总括》及《JavaScript数学生运动算用法总计》

    但愿本文所述对大家JavaScript程序设计有着补助。

    本文实例汇报了JS事件加多和移出的相配写法。分享给我们供大家参照他事他说加以考察,具体如下: v...

    JS完毕移动缓冲效用的封装函数示例,js示例

    正文实例汇报了JS完毕移动缓冲功用的封装函数。分享给大家供我们参谋,具体如下:

    1010cc时时彩经典版,事先平日写运动函数,要写许多繁多,后来想办法封装起来。(运动缓冲)。

    /*
      物体多属性同时运动的函数
      obj:运动的物体
      oTarget:对象,属性名为运动的样式名,属性值为样式运动的终点值
      ratio:速度的系数
    */
    function bufferMove(obj, oTarget, fn,ratio = 8) {
      clearInterval(obj.iTimer);
      obj.iTimer = setInterval(function () {
        // 此处设定开关bBtn,假设所有的属性均已运动完毕true
        var bBtn = true;
        for(var sAttr in oTarget){
          // 获取当前值,此处兼容透明度的变化
          if(sAttr === 'opacity') {
            var iCur = parseFloat(getStyle(obj, sAttr) * 100);
          } else {
            var iCur = parseInt(getStyle(obj, sAttr));
          }
          // 计算速度,此处可判定方向,如向左或向右,先透明后出现或先出现后透明等
          var iSpeed = (oTarget[sAttr] - iCur) / ratio;
          iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
          // 计算下一次的值
          var iNext = iCur   iSpeed;
          // 赋值给对应样式
          if(sAttr ==='opacity') {
            obj.style.opacity = iNext / 100;
            obj.style.filter = 'alpha(opacity='   iNext  ')';
          } else {
            obj.style[sAttr] = iNext   'px';
          }
          // 清除定时器,当前的位置和终点值是否相等,相等则说明结束
          if(iNext !== oTarget[sAttr]) {
            bBtn = false;
          }
        }
        // 如果bBtn的值为true,则说明所有的属性均已运动完毕,回调函数fn()
        if(bBtn) {
          clearInterval(obj.iTimer);
          if(fn){
            fn();
          }
        }
      }, 50);
    }
    

    如上封装函数也得以用来单个属性,二种式运动,比如:

    bufferMove(obj,{"left":200,"width":400,"opacity":80},fn,8);
    

    就这样。

    更加多关于JavaScript相关内容感兴趣的读者可查看本站专项论题:《JavaScript运动作用与技艺汇总》、《JavaScript切换特效与本事计算》、《JavaScript查找算法本事计算》、《JavaScript动画特效与技艺汇总》、《JavaScript错误与调治技术计算》、《JavaScript数据结构与算法本事总括》、《JavaScript遍历算法与工夫总计》及《JavaScript数学生运动算用法总括》

    可望本文所述对大家JavaScript程序设计有所支持。

    本文实例汇报了JS达成移动缓冲功效的封装函数。分享给大家供我们仿照效法,具体如下: 在此之前经...

    JS封装通过className获取成分的函数示例,jsclassname

    正文实例陈说了JS封装通过className获取成分的函数。分享给我们供我们参谋,具体如下:

    <div id="box">
      <div class="star"></div>
      <div class="star"></div>
      <div class="app"></div>
      <p class="star"></p>
      <p class="ar"></p>
    </div>
    

    假若要得到全体.star成分

    function getByClass(oparent,sClass){
      var aEle=oparent.getElementsByTagName("*");
      var aResult=[];
      var i;
      for(i=0;i<aEle.length;i  ){
        if(aEle[i].className==sClass){
          aResult.push(aEle[i]);
        }
      }
      return aResult;
    };
    window.onload=function(){
      var box=document.getElementById("box");
      var star=getByClass(box,"star");
    };
    

    越来越多关于JavaScript相关内容可查看本站专项论题:《JavaScript常用函数手艺汇总》、《javascript面向对象入门教程》、《JavaScript中json操作技巧计算》、《JavaScript切换特效与本领计算》、《JavaScript查找算法本事计算》、《JavaScript错误与调解本事计算》、《JavaScript数据结构与算法工夫总计》、《JavaScript遍历算法与本事总结》及《JavaScript数学生运动算用法总括》

    指望本文所述对大家JavaScript程序设计有所帮忙。

    本文实例陈说了JS封装通过className获取成分的函数。分享给大家供大家参谋,具体如下:...

    JS函数八个参数暗中同意值钦点方法深入分析,js暗中同意值

    本文实例汇报了JS函数多少个参数暗中同意值内定方法。分享给大家供大家参谋,具体如下:

    函数有一个参数时,未来那般定义(参数为p1):

    function mfun(p1){ … }
    

    当供给为p1设定二个暗中同意值时

    function mfun(p1){
    if(p1===undefined) p1=5; //默认值设为5
    …
    }
    

    当函数需求2个参数时,以前习贯那样写

    function mfun(p1,p2){…}
    

    后来发觉完全无需那样写,js函数乃至不必要在括弧内预设参数名,能够用一下方式传入率性多少个参数自动适配,当没有被定义时,那么些未被赋值参数被调用时值为 undefined

    以下例子示范了贰个2个参数的js函数

    function mFun(){
     var p1 = arguments[0] ? arguments[0] : -1; //设置参数p1默认值为-1
     var p2 = arguments[1] ? arguments[1] : ‘ABC'; //p2默认值 ‘ABC'
    …
    }
    

    以下是部分不当示范:

    急需2参数,第一个为可选参数时定义

    function mFun(p1){...}
    function mFun(p1,p2){...}
    

    *这种写法,mFun(p1)会被上面包车型客车函数覆盖掉,当只传入二个参数时,p2会提醒undefined

    funciton mfun(p1,p2='xxx'){...}
    

    这是php习惯.. =___=b..

    再看一个例子:

    function simue (){
     var a = arguments[0] ? arguments[0] : 1;
     var b = arguments[1] ? arguments[1] : 2;
     return a b;
    }
    alert( simue() ); //输出3
    alert( simue(10) ); //输出12
    alert( simue(10,20) ); //输出30
    

    越多关于JavaScript相关内容感兴趣的读者可查阅本站专项论题:《JavaScript常用函数技术汇总》、《JavaScript传值操作工夫计算》、《javascript编码操作技艺总计》、《JavaScript中json操作手艺总计》、《JavaScript错误与调治技艺计算》、《JavaScript数据结构与算法本事计算》、《JavaScript遍历算法与工夫总结》及《JavaScript数学生运动算用法计算》

    希望本文所述对大家JavaScript程序设计有着扶助。

    本文实例叙述了JS函数三个参数暗中同意值钦命方法。分享给大家供我们参谋,具体如下: 函数...

    本文由1010cc时时彩经典版发布于1010cc时时彩客户端,转载请注明出处:JS实现运动缓冲效果的封装函数示例,JS封装通过

    关键词: