javascript加速运动

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>

    <style type="text/css">

        #div1

        {

            width: 100px;

            height: 100px;

            background-color: green;

            position: absolute;

            left:600px;

            top: 50px;

        }

        #div2

        {

            width:1px;

            height:300px;

            position:absolute;

            background-color:gray;

            left:300px;

            top:0px;

        }

    </style>

</head>

<script type="text/javascript">

    var timer = null;

    function Move() {

        var oDiv = document.getElementById("div1");

        timer = setInterval(function () {

            var speed = (300 - oDiv.offsetLeft) / 10;

            speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);

            oDiv.style.left = oDiv.offsetLeft + Math.ceil(speed) + "px";

        }, 30);

    }

</script>

<body>

    <input type="button" id="btn" value="开始运动" onclick="Move()" />

    <div id="div1"></div>

    <div id="div2"></div>

</body>

</html>
巴特西

javascript加速运动

最新文章

热门文章
