页面元素简单移动

iteye_12132

于 2010-07-16 10:06:47 发布

阅读量125

点赞数

分类专栏： JavaScript 文章标签： HTML

JavaScript 专栏收录该内容

117 篇文章

订阅专栏

本文介绍了一个简单的HTML和JavaScript实现元素移动的示例。通过设置div元素的初始位置，并使用JavaScript定时器逐步调整其left属性，实现了从一个位置平滑移动到另一个指定位置的效果。此过程涉及对元素位置的精确控制及动画效果的实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >


<div id="div1" style="position:absolute;top:100px;left:200px;width:100px;background-color:green;height:100px;"></div>
<button onclick="doMoveElement();">moveElement</button>


function doMoveElement(){
    var el = document.getElementById('div1');
    moveElement(el,240,200);

}
function moveElement(el,finalX,finalY){
    var moving = el.getAttribute('moving');
    if(moving){
        clearTimeout(moving);
    }
    doMove = function(el,finalX,finalY){
        var pox = parseInt(el.style.left);
        if(pox == finalX){
            clearTimeout(el.getAttribute('moving'));
            el.removeAttribute('moving');
            return;
        }
        else if(pox < finalX){
            //每次前进1/5,因而是具有"加速度"的
            pox = pox + Math.ceil((finalX - pox)/2);
        }   
        else if(pox > finalX){
            pox--;
        }
        el.style.left = pox + 'px';
        moveElement2(el,finalX,finalY);
    };
    moving = setTimeout(function(){
            doMove(el,finalX,finalY);
    },1000);
    el.setAttribute('moving',moving);

}