JavaScript运动基础，常用函数封装

要求：点按钮，红色div右移

<style>
    #div1 {
        width:200px;
        height:200px;
        background:red;
        position:absolute;
        top:50px;
        left:0;
    }
</style>

<div id="div1"></div>
<input type="button" value="start" />

<script>
    oBtn.onclick = function() {
        function startMove() {
            var oDiv = document.getElementById('div1');
            setInterval(function(){
                oDiv.style.left = oDiv.offsetLeft + 10 + 'px';
            }, 30);
        }
    };
</script>

但是，有问题，不能停下来，要求能停下来

var timer = null;
var speed = 7;
oBtn.onclick = function() {
    function startMove() {
        var oDiv = document.getElementById('div1');
        timer = setInterval(function() {
            if (oDiv.offsetLeft == 300) {
                clearInterval(timer);
            }
        oDiv.style.left = oDiv.offsetLeft + speed +'px';
        }, 30);
    }
};

很显然，speed为10没有问题，如果为7呢？，根本停不下来，因为7,14,21,……..280,287,294,301….直接跳过300，所以，程序中==300是不合理的应该修改为 ‘>=300’，虽然停下来，但是，停的位置是301，不精准。

var timer = null;
var speed = 7;
oBtn.onclick = function() {
    function startMove() {
        var oDiv = document.getElementById('div1');
        timer = setInterval(function() {
            if (oDiv.offsetLeft >= 300) {
                clearInterval(timer);
            }
        oDiv.style.left = oDiv.offsetLeft + speed +'px';
        }, 30);
    }
};

现在，红色div已经到了目的地，再点击，应该不再移动，但是，你再点击按钮，奇怪，居然还是右移了一下，每次点击都还移动一次，准确说，又移动了7px，为什么？因为，你点击一次，就启动一次定时器，但你会问，我做了判断，大于300了就停止定时器了。但是，你认真思考，你停的定时器只是从下一次不开始执行了，但是本次的还是要执行完。解决方案很简单，就是下面移动的那一句不让执行了，加个else：

var timer = null;
var speed = 7;
oBtn.onclick = function() {
    function startMove() {
        var oDiv = document.getElementById('div1');
        timer = setInterval(function() {
            if (oDiv.offsetLeft >= 300) {
                clearInterval(timer);
            } else {
                oDiv.style.left = oDiv.offsetLeft + speed +'px';
            }
        }, 30);
    }
};

现在将speed改为1，我连续多点几次启动按钮，你会发现，红色div走的越来越快，因为，你每点一次，就启动一个定时器，点五次，就五个，五个同时走，就相当于5倍的speed，我们需要保证只有一个定时器在工作怎么解决？启动定时器之前清理掉之前的即可！

var timer = null;
var speed = 7;
oBtn.onclick = function() {
    function startMove() {
        var oDiv = document.getElementById('div1');
        clearInterval(timer);
        timer = setInterval(function() {
            if (oDiv.offsetLeft >= 300) {
                clearInterval(timer);
            } else {
                oDiv.style.left = oDiv.offsetLeft + speed +'px';
            }
        }, 30);
    }
};

总结一下：

1. 在运动开始时，关闭已有定时器,免得多个定时器同时工作
2. 把运动和停止隔开(if/else)，把运动和停止分开，不能同时发生

例子1–侧边栏

就是分享，鼠标移到最左边出现一个侧边栏，移走鼠标，侧边栏又消失

<style>
    #div1 {
        width:150px;
        height:200px;
        background:green;
        position:absolute;
        left:-150px;/*隐藏，改为0就出来了*/
    }
    #div1 span {
        position:absolute;
        widht:20px;
        height:60px;
        line-heigth:20px;
        background:blue;
        right:-20px;
        top:70px;
    }
</style>
<div id="div1">
    <span>分享到</span>
</div>

<script>
    var oDiv = document.getElementById('div1');
    var timer = null;
    window.onload = function() {
        oDiv.onmouseover = function() {
            outspreadMove();
        };
        oDiv.onmouseout = function() {
            shinkspeadMove();
        };
    };
    function outspreadMove() {
        clearInterval(timer);
        timer = setInterval(function() {
            if(oDiv.offset == 0) {
                clearInterval(timer);
            } else {
                oDiv.style.left = oDiv.offsetLeft + 10 + 'px';
            }
        },30);
    }

    function shrinkspreadMove() {
        clearInterval(timer);
        timer = setInterval(function() {
            if(oDiv.offsetLeft == -150) {
                clearInterval(timer);
            } else {
                oDiv.style.left = oDiv.offsetLeft - 10 + 'px';
            }
        },30);
    }
</script>

优化，合并

以上2个move函数，长得那么像，可以合并的，你看看两个函数，不一样的地方，一个（0，-150）,一个（10，-10），不一样的地方当参数传过来，遵循这个原则即可

<script>
    function fnMove(speed, iTarget) {
        clearInterval(timer);
        timer = setInterval(function() {
            if(oDiv.offsetLeft == iTarget) {
              clearInterval(timer);  
            } else {
               oDiv.style.left = oDiv.offsetLeft + speed + 'px' 
            }
        }, 30)
    }
    //Invoke
    oDiv.onmouseover = function() {
        fnMove(10, 0);
    };
    oDiv.onmouseout = function() {
        fnMove(-10, -150);
    };
</script>

进一步优化

两个函数功能一样，参数越少，用的越好，我希望能减少一个参数，上面fnMove(),两个参数，一个速度，一个目的地。就像打出租车，你只要说你去望京就行了，哪有告诉出租车你要开多快速度的？所以，要把speed这个参数干掉。

left: 30 iTarget:300 需要右走（速度正）

left: 600 iTarget:50 需要左走（速度负）

<script>
    function fnMove(iTarget) {
        var speed = 0;
        if(oDiv.offsetLeft > iTarget) {
            speed = -10;
        } else {
            speed = 10;
        }
        clearInterval(timer);
        timer = setInterval(function() {
            if(oDiv.offsetLeft == iTarget) {
              clearInterval(timer);  
            } else {
               oDiv.style.left = oDiv.offsetLeft + speed + 'px' 
            }
        }, 30)
    }
    //Invoke
    oDiv.onmouseover = function() {
        fnMove(0);
    };
    oDiv.onmouseout = function() {
        fnMove(-150);
    };
</script>

淡入淡出的图片

#div {
    width:200px;
    height:200px;
    background:red;
    filter:alpha(opacity:30);
    opacity:0.3;
}
<div id="div1">
</div>
<script>
    var alpha = 30;
    var timer = null;
    function startMove(iTarget) {
        var oDiv = document.getElementById('div1');
        clearInterval(timer);
        timer = setInterval(function() {
            var speed = 0;
            if(alpha < iTarget) {
                speed = 10;
            } else {
                speed = -10;
            }
            if(alpha == iTarget) {
                clearInterval(timer);
            } else {
                alpha += speed;//目前为止，仍然看不到物体透明度的变化，因为只是alpha变量在变化
                oDiv.style.filter = 'alpha(opacity:'+alpha+')';
                oDiv.style.opacity = alpha/100;//兼容火狐、Chrome
            }
        }, 30)
    }

    window.onload = function() {
        var oDiv = document.getElementById('div1');
        oDiv.onmouseover = function() {
            startMove(100);
        };
        oDiv.onmouseout = function() {
            startMove(30);
        };
    };
</script>

注意：opacity设置不透明度，所有浏览器都支持IE8以及更早版本支持替代的filter属性，例如：filter:Alpha(opacity=50)。