韦德国际1946英国 > 计算机网络 > 如何写一个通用的JavaScript效果库

原标题:如何写一个通用的JavaScript效果库

浏览次数:91 时间:2019-09-22

 

Effect.Fn 里面包车型地铁有着成员函数都会被 effect.loop 试行, 那些实践动作在功效运营中,因而这里
将要放大旨职能代码,比方总计,退换成效增量等等。 

在上个小说中贴出了效劳库的欧洲经济共同体框架,和多少个简约的opacity插件. 前几天那一个小说首即使扩大别的常用
效果插件,毕竟框架只好是个空壳,内容照旧要和谐增添。
比方看过了笔者上篇的兑现细节,这里就十分的少说废话了,来段代码先:

[Ctrl A 全选 注:如需引进外界Js需刷新技能推行]

 

执行foo1

 

   

老是效果后按这里恢复生机

复制代码 代码如下:

/**//****************************************************/ 
// zoom   by Go_Rush(阿舜) from  
Effect.Init.zoom=function(effect){     
    effect.setting.zoom      =effect.element.style.zoom || 1; 
    // firefox 不协理 css的 zoom 用  改动 width,height的方法替代  
    if (effect.options.zoom!==undefined && navigator.userAgent.toLowerCase().indexOf('firefox') != -1){                     
        effect.options.w=effect.element.offsetWidth  * effect.options.zoom; 
        effect.options.h=effect.element.offsetHeight * effect.options.zoom;     
    } 

Effect.Fn.zoom=function(effect,pos){ 
    if (effect.options.zoom===undefined) return; 
    effect.element.style.zoom=effect.setting.zoom (effect.options.zoom-effect.setting.zoom)*pos 

/**//****************************************************/ 
/**//****************************************************/ 
// size  同上,是 size to, 退换到钦赐大小 by Go_Rush(阿舜) from  
Effect.Init.size=function(effect){ 
    if (effect.options.w!==undefined || effect.options.h!==undefined){ 
        effect.setting.overflow   =effect.element.style.overflow || 'visible'; 
        effect.setting.width      =effect.element.offsetWidth; 
        effect.setting.height      =effect.element.offsetHeight;  
        effect.element.style.overflow ="hidden"     
        effect.options.w=(effect.options.w===undefined)?effect.setting.width :effect.options.w; 
        effect.options.h=(effect.options.h===undefined)?effect.setting.height:effect.options.h;             
    } 

Effect.Fn.size=function(effect,pos){     
    if (effect.options.w===undefined && effect.options.h===undefined) return; 
    effect.element.style.width =effect.setting.width   (effect.options.w-effect.setting.width ) * pos  "px"; 
    effect.element.style.height=effect.setting.height  (effect.options.h-effect.setting.height) * pos  "px"; 

/**//****************************************************/ 
/**//****************************************************/ 
// 背景色 by Go_Rush(阿舜) from  
Effect.Init.bgcolor=function(effect){ 
    if (effect.options.bgcolor!==undefined && /^#?[a-f0-9]{6}$/i.test(effect.options.bgcolor)){ 
        var color =effect.element.style.backgroundColor || "#ffffff"; 
        //FireFox 下,固然css样式设置背景为 #ffffff格式,但顺序取到的是 rgb(255,255,255)格式, 这里把他转化为 #ffffff格式 
        if (/rgb/i.test(color)){               // "rgb(255, 0, 255)" 
            //var arr=color.replace(/[rgb(s)]/gi,"").split(",") 
            var arr=eval(color.replace("rgb","new Array"))        
            color="#" Number(arr[0]).toColorPart() Number(arr[1]).toColorPart() Number(arr[2]).toColorPart() 
        } 
        effect.setting.bgcolor=color 
    } 

Effect.Fn.bgcolor=function(effect,pos){     
    if (effect.options.bgcolor===undefined) return; 
    var c1=effect.setting.bgcolor,c2=effect.options.bgcolor 
    var arr1=[parseInt(c1.slice(1,3),16),parseInt(c1.slice(3,5),16),parseInt(c1.slice(5),16)] 
    var arr2=[parseInt(c2.slice(1,3),16),parseInt(c2.slice(3,5),16),parseInt(c2.slice(5),16)] 
    var r=Math.round(arr1[0] (arr2[0]-arr1[0])*pos) 
    var g=Math.round(arr1[1] (arr2[1]-arr1[1])*pos) 
    var b=Math.round(arr1[2] (arr2[2]-arr1[2])*pos) 
    effect.element.style.backgroundColor="#" r.toColorPart() g.toColorPart() b.toColorPart() 

/**//****************************************************/ 
/**//****************************************************/ 
// 光滑度,那些上个贴过了   by Go_Rush(阿舜) from  
Effect.Init.opacity=function(effect){ 
    if (effect.options.opacity===undefined) return; 
    effect.setting.opacity=Opacity(effect.element);     

Effect.Fn.opacity=function(effect,pos){ 
    if (effect.options.opacity===undefined) return; 
    Opacity(effect.element,effect.setting.opacity (effect.options.opacity-effect.setting.opacity)*pos);     

/**//****************************************************/ 

   

[Ctrl A 全选 注:如需引进外部Js需刷新手艺推行]

执行foo3(5秒)

大 小 foo2

留心上述几个自定义函数 onStart,onUpdate,onComplete 他们都以经过 options传进来的调用者自定义函数。
各自在功能产生原先,效果发生时,效果产生完成后进行。传入的参数能够查阅effect的持有目的。

 

实行foo4(自定义函数)

复合效用

这一页挺长的,前几日新开三个小说,再把扩充的插件 size, move,zoom,color等等全珍重出来,还应该有一点点演示代码

所有 foo6

JavaScript的动态效果最核心的是 动态改动大小,移动地方,改动折射率,更换颜色等等。
而别的一些比较炫的效率无非是对那个最基本职能的结合和选用。

 

        Number.prototype.toColorPart =function(){return String("00" this.toString(16)).slice(-2)};         
        Function.prototype.bind = function() { 
             var __method = this, args = $A(arguments), object = args.shift(); 
            return function(){return __method.apply(object, args.concat($A(arguments)))} 
        } 

日趋变小消失2 fix4

复制代码 代码如下:

单一作用

/* 
    这些函数的代码来自 Prototype.js   
    纵然页面援用了prototype.js ,则能够去除下边这么些函数, 
    当然,固然不删除也没涉及,因为作了回顾的包容性判别 
*/ 
(function(){    
    if     (!("Prototype" in window)){ 
        Prototype={emptyFunction:function(){}}; 
        Class ={ 
            create: function(){return function(){this.initialize.apply(this, arguments)}} 
        };         
        $ = function(element){ 
            return typeof(element)=="string"?document.getElementById(element):element 
        }; 
        $A= function(arrLike){ 
            for(var i=0,ret=[];i<arrLike.length;i ) ret[i]=arrLike[i]; 
            return ret 
        };     

 

复制代码 代码如下:

复制代码 代码如下:

Effect.Fn.opacity=function(effect,pos){ 
 if (effect.options.opacity===undefined) return; 
 Opacity(effect.element,effect.setting.opacity (effect.options.opacity-effect.setting.opacity)*pos);  

  注意 FireFox 不支持 Zoom

在超越四分之二情景下我们须要二个娇小独立(300行代码以内),无侵入性的效果库。.尽管有存活的车轮,
我们不但要学会怎么利用轮子,更要学会怎么亲手造贰个轱辘。
据书上说上述原因,大家明天来重写多少个灵活的,增加性强的,小巧的,跨浏览器的动态效果库。

 

执行foo2(延迟)

折起fix2

Go_Rush(阿舜) @ Go_Rush(阿舜) @

颜 色 foo1

那么怎么统一计划那一个Effect效果库呢。
第一,它的进口应该简洁。 
    1.二个是要运用功能的要素 element 
    2.另二个是即将利用什么成效 options 
       options应该是扩充性强的,方便客商使用的。我们把它设计成哈稀结构。
举例 options={x:100,y:100} 表示 将element移动到坐标 100,100
options={w:200,h:200} 表示将element的深浅改动为 width=200,height=200
她俩得以重叠,也足以确省 比方 options={h:20,y:20} 那意味将element移动到 top=20的地方,而且在运动的进程中让她的深浅改造为 height=20 ,同一时间,原本的left坐标和宽度都不产生改动,那是还是不是在做QQ的滑行效果啊?
再有调节功用的多少个关键因素 duration(整个功效的时刻),delay(延迟几秒才起来效果),fps(频率快慢) 都通过options传进来

本文由韦德国际1946英国发布于计算机网络,转载请注明出处:如何写一个通用的JavaScript效果库

关键词: 伟德19461946

上一篇:在第一个input框内输入内容,js验证表单大全1

下一篇:没有了