芒果小站

  1. 全球最具业界良心的主机 - DigitalOcean

    毫无疑问,目前做得最好的主机供应商

    猛击这里查看

  2. 芒果小站目前使用的主机 - DigitalOcean

    客服响应快,随时退款,XEN 架构稳定

    猛击这里查看

  3. 最好的日本东京线路主机 - DigitalOcean

    可选弗里蒙特、达拉斯、亚特兰大、纽瓦克、伦敦、东京机房

    猛击这里查看

  • 1
  • 2
  • 3
切换到精简模式
2

基于 YUI 2.8 的层染色褪色效果

作者 芒果/分类 代码/发布于 2010-03-25 10:12

项目中遇到的一个动画效果,在这里分享一下。基于 YUI 2.8 框架。

CSS:

.coloring{border:1px solid #eee;padding:50px;margin:50px 0;background:#fff;}

HTML:

<button id="view-coloring">点击染色</button>
<div id="coloring">染色层</div>

JavaScript:
你需要预先载入 YUI 2.8 框架,这里提供 Google 的托管地址:

<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>

当然也可以从 YUI 官方拽下来:

<script src="http://yui.yahooapis.com/2.8.0r4/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script =src="http://yui.yahooapis.com/2.8.0r4/build/animation/animation-min.js"></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);
});
})();

演示地址:http://bbs.blueidea.com/thread-2978052-1-1.html

版权所有,转载请注明出处。
转载自 <a href="http://mangguo.org/layer-coloring-fading-effect-base-on-yui-2-8/" title="基于 YUI 2.8 的层染色褪色效果" rel="bookmark">基于 YUI 2.8 的层染色褪色效果 | 芒果小站</a>
如果喜欢这篇文章,欢迎订阅芒果小站以获得最新内容。

已经有 2 条群众意见

  1. Jutoy /2010-03-28 17:37

    唔,就木有效果看看么~ 回应

    #1
  2. 文说有理 /2010-04-01 09:44

    有个效果看就好了。 回应

    #2

下面我简单说几句