mootools_Periodical

最新推荐文章于 2020-08-03 13:26:31 发布

weixin_33804990

最新推荐文章于 2020-08-03 13:26:31 发布

阅读量82

点赞数

原文链接：http://www.cnblogs.com/santiago1983/archive/2012/02/05/mootools_periodica

版权

关于动画，Mootools一直都是比较让我喜爱的部分。

当然，更重要的是mootools的面向对象的框架让我更为青睐（过去我一直是在写as,因此我更加习惯这种写法）。

说道Periodical，这个方法。我们可得好好研究下。随着学习的深入，在mootools中应用还是大有用途。

我们以这个例子来说明下Periodical的应用。

先给出源码，方便大家调试与理解：

View Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<style>
#box {
    margin: 1em auto;
    width: 200px;
    height: 150px;
    background: #6B7B95;
}
</style>
</head>

<body>
<h3>Periodical Effects</h3>
<a id="start" href="#">start</a> | <a id="stop" href="#">stop</a>

<div id="box"></div>

<script src="mootools-core-1.4.3-full-nocompat.js"></script>
<script type="text/javascript">
    window.addEvent('domready', function(){
var effect = new Fx.Tween('box', {duration: 200}),
        periodical;
// Create the function wich will run the effect
var fx = function() {
        effect.start('background-color', '#6B7B95').chain(function(){
            effect.start('background-color', '#E79D35');
        });
// return this function, so you could do fx() which returns fx,
//or fx()()() which still returns fx and runs the function 3 times
return fx;
    };
        $('start').addEvent('click', function(event){
        event.stop();
// We call the fx function once directly, which returns the fx function again, and set the periodical to 1.7 seconds
// We store the reference to the peridical in the peridical, so we can stop it later
        periodical = fx().periodical(800);
    });
        $('stop').addEvent('click', function(event){
        event.stop();
// With the JavaScipt function clearInterval we can stop the interval
        clearInterval(periodical);
    });
        })
</script>
</body>
</html>

在这些代码里面，我们就说说js部分：

首先，domready时，我们加载这个funciton.

window.addEvent('domready', function(){}）

接下来，我们就要给出function内具体的内容了。

var effect = new Fx.Tween('box', {duration: 200}),
        periodical;
// 定义动画
        var fx = function() {
        effect.start('background-color', '#6B7B95').chain(function(){
            effect.start('background-color', '#E79D35');
        });
//返回 fx,
        return fx;
    };

　　　　　//定义start 按钮上的click 事件
        $('start').addEvent('click', function(event){
        event.stop();
// 定义periodical的间隔为0.8秒
        // 定义了periodical
        periodical = fx().periodical(800);
    });

　　　　　//定义stop按钮上的click事件　
        $('stop').addEvent('click', function(event){
        event.stop();
// 清除periodical动画
        clearInterval(periodical);

其实归根结底periodical还是比较简单：function.periodical({interval})

如果要清除：clearInterval(periodical)

希望对大家的理解有所帮助。

转载于:https://www.cnblogs.com/santiago1983/archive/2012/02/05/mootools_periodical.html