[学习笔记]JavaScript基础--运动应用

最新推荐文章于 2024-06-11 16:23:42 发布

Mr_Lan_

最新推荐文章于 2024-06-11 16:23:42 发布

阅读量243

点赞数

分类专栏： JavaScript基础

本文链接：https://blog.csdn.net/Mr_Lan_/article/details/47361665

版权

JavaScript基础专栏收录该内容

20 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
	<meta charset="utf-8" />
    <style>
        div {width:100px; height:50px; background:red;
              margin:10px;
        }
    </style>
    <script>
        window.onload = function ()
        {
            
            var aDiv = document.getElementsByTagName('div');

            for (var i = 0; i < aDiv.length;i++)
            {
                aDiv[i].timer = null;
                aDiv[i].οnmοuseοver=function()
                {
                    startMove(this, 400);
                };
                aDiv[i].onmouseout = function () {
                    startMove(this, 100);
                };
            }
        };
        
        //var timer = null;
        function startMove(obj, iTarget)
        {
            
            clearInterval(obj.timer);
            obj.timer = setInterval(function ()
            {
                var speed = (iTarget - obj.offsetWidth) / 6;
                speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);

                if (obj.offsetWidth == iTarget)
                {
                    clearInterval(obj.timer);
                }
                else
                {
                    obj.style.width =obj.offsetWidth + speed + 'px';
                }
            }, 30);
        }
    </script>
</head>
<body>
    <div></div>
    <div></div>
    <div></div>
</body>
</html>