如何写一个通用的JavaScript效果库!(2/2)

在上个随笔中贴出了效果库的整体框架,和一个简单的opacity插件. 今天这个随笔主要是扩展其他常用
效果插件,毕竟框架只能是个空壳,内容还是要自己充实。
如果看过了我上篇的实现细节,这里就不多说废话了,来段代码先:


代码如下:

/**//****************************************************/ 
// 移动, 这里是move to  就是移动到 x,y 当然,大家也可以再扩展一个move by  移动x个象素 
Effect.Init.move=function(effect){   //初始化 
    if (effect.options.x!==undefined || effect.options.y!==undefined){         
        var pos=Position.cumulativeOffset(effect.element); 
        effect.setting.left       =pos[0]; 
        effect.setting.top          =pos[1]; 
        effect.setting.position =effect.element.style.position;      
        effect.element.style.position    ="absolute" 
        effect.options.x=(effect.options.x===undefined)?effect.setting.left:effect.options.x; 
        effect.options.y=(effect.options.y===undefined)?effect.setting.top :effect.options.y;                         
    } 

Effect.Fn.move=function(effect,pos){     //效果 
    if (effect.options.x===undefined && effect.options.y===undefined) return         
    effect.element.style.left=effect.setting.left + (effect.options.x-effect.setting.left) * pos +"px"; 
    effect.element.style.top =effect.setting.top  + (effect.options.y-effect.setting.top ) * pos +"px"; 

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

/**//****************************************************/ 
// zoom   by Go_Rush(阿舜) from http://ashun.cnblogs.com/ 
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 http://ashun.cnblogs.com/ 
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 http://ashun.cnblogs.com/ 
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 http://ashun.cnblogs.com/ 
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);     

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

这里 effect.setting 是非常有用而且非常重要的冬冬,所有的通过options传进来自定义函数都可以
通过effect.setting来获取element最初的设置。 在很多场合,我们需要在 options 中传一个 onComplete
函数进来, 用来在效果执行完毕后,打扫战场,恢复一些设置。
这些效果是可以重叠的,大家可以看看下面我写的例子。
写了十来个例子,应该很详细了。
完整的,可调试代码和例子如下:

/**//*
这个函数的代码来自 Prototype.js http://prototype.conio.net/
如果页面引用了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=[];i5) return false;
new Effect("div1",{x:280,delay:0.5,duration:0.1,onComplete:function(){
new Effect("div1",{x:320,duration:0.1,onComplete:function(){
new Effect("div1",{x:280,duration:0.1,onComplete:function(){
new Effect("div1",{x:320,duration:0.1,onComplete:function(){
new Effect("div1",{x:280,duration:0.1,onComplete:function(){
new Effect("div1",{x:300,duration:0.1,onComplete:function(){
fix6()
}})
}})
}})
}})
}})
}})
}

单一效果
颜 色 foo1 
大 小 foo2 
位 置 foo3 
透 明 度 foo4 
Zoom foo5 
所有 foo6

复合效果
淡出fix1 
折起fix2 
慢慢变小消失 fix3 
慢慢变小消失2 fix4 
变色 fix5 
震动5次 fix6

每次效果后按这里恢复

注意 FireFox 不支持 Zoom

Go_Rush(阿舜)

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

(0)

相关推荐

  • 如何写一个通用的JavaScript效果库!(1/2)

    JavaScript的动态效果最基本的是 动态改变大小,移动位置,改变透明度,改变颜色等等. 而其他一些比较炫的效果无非是对这些最基本效果的组合和运用. 现在网上已经有很多很不错的优秀Javascript库或者效果库,我们是否有必要再造轮子呢? 放眼望去,Yahoo UI, 基于Prototype的scriptaculous, Rico, JQuery, Dojo,还有很多很多. 这些库都带有很不错很优秀的动态效果.我们可以直接使用. 但是对于一些中小型项目来说,只是偶尔用到一两个特效,就没有必

  • 如何写一个通用的JavaScript效果库!(2/2)

    在上个随笔中贴出了效果库的整体框架,和一个简单的opacity插件. 今天这个随笔主要是扩展其他常用 效果插件,毕竟框架只能是个空壳,内容还是要自己充实. 如果看过了我上篇的实现细节,这里就不多说废话了,来段代码先: 复制代码 代码如下: /**//****************************************************/  // 移动, 这里是move to  就是移动到 x,y 当然,大家也可以再扩展一个move by  移动x个象素  Effect.Init

  • 一个轻量级的javascript库 pj介绍

    相对于其他语言来说,javascript脚本语言太小巧玲珑了,活泼灵动.个人非常喜欢写javascript代码.虽说网络上出名的javascript库充斥网络,jQuery.Prototype.Base.ExtJs--,功能也非常强大,使用起来也方便.但是有一个不太令人满意的地方,就是库本身太大了.有时只是用其中几个功能就必须得把整个库引进来,就jQuery来说,压缩了也还有70多KB,有时比一个网页文件还大.但我们有需要一个库来协助开发,所以自己就写了一个轻量级的javascript库,只支持

  • javascript轻量级库createjs使用Easel实现拖拽效果

    我就把我学习Createjs的一些心得体会向大家分享下: 一.什么是CreateJS? createjs是一个轻量级的javascript库,是一套可以构建丰富交互体验的 HTML5 游戏的开源工具包,利用createjs可以构建出许多有趣的动画游戏.例如围住神经猫,看你有多色等Html5游戏. 二.CreateJS有哪几款工具? createjs里面共有四大引擎: EaselJS:主要用于动画.向量及位图的绘制.提供支持移动设备触控的一系列方法(click.mousedown.pressup.

  • javascript如何用递归写一个简单的树形结构示例

    现在有一个数据,需要你渲染出对应的列表出来: var data = [ {"id":1}, {"id":2}, {"id":3}, {"id":4}, ]; var str="<ul>"; data.forEach(function(v,i){ str+="<li><span>"+v.id+"</span></li>&

  • 如何用JavaScript实现一个数组惰性求值库

    概述 在编程语言理论中,惰性求值(英语:Lazy Evaluation),又译为惰性计算.懒惰求值,也称为传需求调用(call-by-need),是一个计算机编程中的一个概念,它的目的是要最小化计算机要做的工作.它有两个相关而又有区别的含意,可以表示为"延迟求值"和"最小化求值",除可以得到性能的提升外,惰性计算的最重要的好处是它可以构造一个无限的数据类型. 看到函数式语言里面的惰性求值,想自己用JavaScript写一个最简实现,加深对惰性求值了解.用了两种方法,

  • 利用JavaScript写一个简单计算器

    效果如下: 参考程序: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=d

  • JavaScript中的canvas 实现一个圆环渐变倒计时效果

    目录 前言 1.效果图展示 2.需求分析 3.实现的技术 4.实现的过程 1. HTML 部分 2. SASS部分 3. JavaScript部分 5.全部源码 1.index.html 2. style.scss 3. index.js 前言 内容: 效果图 需求分析 实现技术 实现过程 全部源码 1.效果图展示 随着时间的减少, 圆环的红黄色部分会慢慢的减少,圆环中的数字会变小,一直到0停止. 2.需求分析 可以自定义倒计时结束的时间 圆环的颜色是渐变的 倒计时的动画在视觉上是流畅运行, 而

  • 怎样在JavaScript里写一个swing把数据插入数据库

    最终的目标是想这样的,在JavaScript里写一个swing来实现确定取消,来决定是否执行这个功能的,但是在执行的过程中,出现了一点问题,每次执行时,都是直接就会插入把数据插入数据库,不能控制了,想要知道应该怎样来解决这个问题,详情要参考下面的代码详情: 复制代码 代码如下: <% boolean foo=false; if (((theqingjiadays<3)&&(thetiqiandays>=1))||((theqingjiadays<10) &&

  • 如何从零开始利用js手写一个Promise库详解

    前言 ECMAScript 是 JavaScript 语言的国际标准,JavaScript 是 ECMAScript 的实现.ES6 的目标,是使得 JavaScript 语言可以用来编写大型的复杂的应用程序,成为企业级开发语言. 概念 ES6 原生提供了 Promise 对象. 所谓 Promise,就是一个对象,用来传递异步操作的消息.它代表了某个未来才会知道结果的事件(通常是一个异步操作),并且这个事件提供统一的 API,可供进一步处理. 三道思考题 刚开始写前端的时候,处理异步请求经常用

随机推荐