如何用原声js实现div移动的动态效果？

场景：一个大div，里面有个小div：小div是居中偏下显示的（相对于大div来说）。
需求：我们现在要来做个效果：点击按钮后，实现小div往左（或右）上角移动（移动范围在大div内，移动的最终结果距离大div有一点儿空隙就行）。

大div relative定位，小div absolute定位，然后设置小div的left/top就行了，要动画就计时器每次+1来执行，准备碰边就清除计时器

javascript获取到该div；
document.getElementById等方式；
然后如果position是相对的，可以调整top和left的值
obj.style.top和obj.style.left
如果不是相对的，那么就需要调整margin-left和margin-top的值
obj.style.marginLeft和obj.style.marginTop

    <style type="text/css">
    #d1{
        position: relative;
        margin-top: 5px;
        float: left;
        width: 1000px;
        height: 400px;
        border: 1px solid #ddd; 
        background : #ddd;
    }
    #d2{
        position: absolute;
        width : 107px;
        height : 86px;
        border : 1px solid black;
        margin:0 auto;
        margin-top: 18%; 
    }
</style>

<script type="text/javascript">
    var i=10;
    function transferImages(){
        var first = document.getElementById("d2");

        first.style.position='absolute';

        var timer = setInterval(function(){
            if(first.style.left=='400px')
                clearInterval(timer);
                i = i+10;
                first.style.left = i+'px';
        },60);    
    }