JavaScript教程_基于YUI2.8的层染色褪色效果
21视频教程网3月25日整理
项目中遇到的一个动画效果，在这里分享一下。基于YUI2.8框架。
首先执行染色，染色完毕后褪为初始颜色。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
.coloring{border:1px solid #eee;padding:50px;margin:50px 0;background:#fff;}
</style>
</head>
<body>
<button id="view-coloring">点击染色</button>
<div class="coloring" id="coloring">染色层</div>
<script src="http://ajax.googleapis.com/ajax/libs/yui/2.8.0r4/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/yui/2.8.0r4/build/animation/animation-min.js"></script>
<script>
(function(){
var attr = {backgroundColor:{from:'#fff', to:'#ff9'}};
var anim = new YAHOO.util.ColorAnim('coloring', attr);
var remove = function remove(){
var attr = {backgroundColor:{from:'#ff9', to:'#fff'}};
var anim = new YAHOO.util.ColorAnim('coloring', attr);
anim.animate();
}
YAHOO.util.Event.on('view-coloring', 'click', function(){
anim.animate();
anim.onComplete.subscribe(remove);
});
})();
</script>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<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教程/编
| Word教程网 | Excel教程网 | Dreamweaver教程网 | Fireworks教程网 | PPT教程网 | FLASH教程网 | PS教程网 |
| HTML教程网 | DIV CSS教程网 | FLASH AS教程网 | ACCESS教程网 | SQL SERVER教程网 | C语言教程网 | JAVASCRIPT教程网 |
| ASP教程网 | ASP.NET教程网 | CorelDraw教程网 |
QQ：2693987339(点击联系)购买教程光盘
:
