今日学习笔记：元素方块的简单移动

最新推荐文章于 2024-08-14 15:45:18 发布

狮鹫、

最新推荐文章于 2024-08-14 15:45:18 发布

阅读量82

点赞数

文章标签： javascript css html

本文链接：https://blog.csdn.net/Hereisrubbish/article/details/120954400

版权

JavaScript 动画效果元素移动定时器 CSS定位

关键词由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
    #btn
    {
        margin: 0 auto;
        text-align: center;
    }
    *
    {
        margin: 0;
        padding: 0;
    }
    #box1
    {
        width: 100px;
        height: 100px;
        background-color: red;
        position: absolute;
        left:200px;
    }
    #box2
    {
        width: 100px;
        height: 100px;
        background-color: yellow;
        position: absolute;
        left:0;
        top: 200px;
    }
    #box3
    {
        width: 1px;
        height: 1000px;
        border-left: 1px black solid;
        position: absolute;
        left:800px
    }
    </style>

    <script type="text/javascript">
    window.onload=function()
    {
        //获取box1
        var box1=document.getElementById("box1");
        //获取box2
        var box2=document.getElementById("box2");
        //获取box3
        var box3=document.getElementById("box3");

        //获取btn01
        var btn01=document.getElementById("btn01");
        //获取btn02
        var btn02=document.getElementById("btn02");
        //获取btn03
        var btn03=document.getElementById("btn03");
        //获取btn04
        var btn04=document.getElementById("btn04");
        //获取btn05
        var btn05=document.getElementById("btn05");
        //获取btn06
        var btn06=document.getElementById("btn06");
        //获取btn07
        var btn07=document.getElementById("btn07");
        //获取btn08
        var btn08=document.getElementById("btn08");

        //定义一个timer变量
        //var timer;
        
        //尝试创建一个可以执行简单的元素移动的函数
        //给函数传递参数
        //obj 要执行的动画对象
        //attr 要执行的动画样式 比如可以传递left top width
        //targetPoint 执行动画的目标位置
        //speed 动画移动速度(正数向右移动，负数向左移动)
        function move(obj,attr,targetPoint,speed)
        {
            //关闭上一个定时器
            clearInterval(obj.timer);
            //获取元素目前的位置
            var currentPoint=parseInt(getComputedStyle(obj,null)[attr]);
            
            //判断速度的正负值
            //如果从0向800移动，则speed为正
            //如果从800向0移动，则speed为负
            if(currentPoint > targetPoint)//即在目标位置的右边，需要向左移动
            {
                //此时速度为负值
                speed=-speed;
            }
                
            //开启一个定时器，用来执行动画效果
            //向执行动画的对象中添加一个timer属性，用来保存自己的定时器的标识，从而避免出现定时器标识的混用以及停止
            //要注意四尽量不要使用全局变量
            obj.timer=setInterval(function()
            {
                //获取目标box的原来的left值
                var oldValue=parseInt(getComputedStyle(obj,null)[attr]);
                //在旧值的基础上增加
                var newValue=oldValue+speed;
                //判断newValue是否大于800
                //从800向0移动
                //向左移动时，需要判断newValue是否小于targetPoint
                //如果是向左移动，那么speed就是负值
                //向右移动时，需要判断newValue是否大于targetPoint
                if((speed<0 && newValue<targetPoint) || (speed>0 && newValue>targetPoint))
                {
                    newValue=targetPoint;
                }

                //将新值设置给box1
                obj.style[attr]=newValue+"px";
                //元素移动到目标点时,使其停止移动动画
                if(newValue == targetPoint)
                {
                    clearInterval(pbj.timer);
                }
            },30);
        }

        //点击btn01后，红色向右移动
        btn01.onclick=function()
        {
            move(box1,"left",800,20);
        };

        //点击btn02后，红色向左移动
        btn02.onclick=function()
        {
            move(box1,"left",0,20);
        };

        //点击btn03后，黄色向右移动
        btn03.onclick=function()
        {
            move(box2,"left",800,20);
        };

        //点击btn04后，黄色向左移动
        btn04.onclick=function()
        {
            move(box2,"left",0,20);
        };

        //点击btn05后，黄色向下移动
        btn05.onclick=function()
        {
            move(box2,"top",800,20);
        };

        //点击btn06后，黄色向上移动
        btn06.onclick=function()
        {
            move(box2,"top",0,20);
        };

        //点击btn07后，红色向下移动
        btn07.onclick=function()
        {
            move(box1,"top",800,20);
        };

        //点击btn08后，红色向上移动
        btn08.onclick=function()
        {
            move(box1,"top",0,20);
        };
        //点击测试按钮，
        //但因为调用了提前清定时器，所以在开启下一个定时器的时候，上一个定时器也会直接清除
        //需要对timer变量的调用进行一些修改
    };
        
        //下面这个方法需要考虑是否兼容IE8，为了方便，我直接使用getComputedStyle(obj,null)[name]
        /*
        function getStyle(obj,name)
        {
            if(window.getComputedStyle)
            {
                return getComputedStyle(obj,null)[name];
            }
            else
            {
                return obj.currentStyle[name];
            }
        }
        */
    </script>
</head>
<body>
    <div id="btn">
    <button id="btn01">红色右移</button>
    <button id="btn02">红色左移</button>
    <button id="btn07">红色下移</button>
    <button id="btn08">红色上移</button>
    <button id="btn03">黄色右移</button>
    <button id="btn04">黄色左移</button>
    <button id="btn05">黄色下移</button>
    <button id="btn06">黄色上移</button>
    </div>
    <br><br>
    <div id="box1"></div>
    <div id="box2"></div>
    <div id="box3"></div>
</body>
</html>

狮鹫、

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
今日学习笔记：元素方块的简单移动

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do.
复制链接

扫一扫