JavaScript教程_基于YUI2.8的层染色褪色效果_Javascript教程_H5之家

JavaScript教程_基于YUI2.8的层染色褪色效果

教程网3月25日整理

项目中遇到的一个动画效果，在这里分享一下。基于YUI2.8框架。
首先执行染色，染色完毕后褪为初始颜色。

简单一点的

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
.coloring{border:1px solid #eee;padding:10px;margin:50px 0;background:#FF0080;border-bottom:1px solid #666;}
</style>
</head>
<body>
<button id="view-coloring">点击染色</button>
<div class="coloring" id="coloring">染色层</div>
<script>
function fx(act, E) {
    var E=E||{}, s = 0, t = 0, time = E.time || 32, hd, die = E.die || function() {};
    _fx = E.fx || Function('x','return Math.pow(x,2)');
    var clear = function(x) {die(E,x);clearInterval(hd)};
    E.get=function(f,t){return + f + (t - f) * s};
    hd = setInterval(function() {s = _fx(t++/time);if(false===act(E,s)||s==1)clear()}, 10);
    return clear
};
function color_diff(x,y,s){
    var f=parseInt,d=16;
    return x.replace(/[^#]{2}/g,function (m,i){
        return ('0'+f(f(m,d)*(1-s)+f(y.slice(i,i+2),d)*s).toString(d)).slice(-2)
    })
};
var ui=document.getElementById('coloring').style;
document.getElementById('view-coloring').onclick=function (){
    var me=this;
    this.fx&&this.fx(1);
    this.fx=fx(function (e,s){
        ui.background=color_diff('#FF0080','#00FFFF',s);
        ui.paddingTop=e.get(10,60)+'px';
        ui.textIndent=e.get(0,500)+'px';
        ui.marginTop=e.get(50,120)+'px';
    },{die:function (e,x){
        if(x)return;
        me.fx=fx(function (e,s){
            ui.background=color_diff('#00FFFF','#FF0080',s);
            ui.paddingTop=e.get(60,10)+'px';
            ui.textIndent=e.get(500,0)+'px';
            ui.marginTop=e.get(120,50)+'px';
        })
    }})
};
</script>
</body>
</html>

JavaScript教程/编