zoukankan      html  css  js  c++  java
  • 前端学习笔记day14 移动盒子 封装函数

    气死了 一个破题 写了一个半小时

    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            body {
                margin: 0px;
            }
            #box1 {
                width: 100px;
                height: 100px;
                background-color: red;
                position: absolute;
                left: 0px;
                top: 50px;
                /*margin-left: 8px;*/
    
            }
            #box2 {
                width: 100px;
                height: 100px;
                background-color: blue;
                position: absolute;
                left: 0px;
                top: 180px;
            }
        </style>
    </head>
    <body>
        <input type="button" name="" value='button1' id='btn1'>
        <input type="button" name="" value='buttom2' id='btn2'>
        <div id='box1'></div>
        <div id='box2'></div>
        
        <script>
            var box = document.getElementById('box1');
            var btn1 = document.getElementById('btn1');
            var btn2 = document.getElementById('btn2');
            btn1.onclick = function() {
                animation(box1,200);
                animation(box2,200);
            }
            btn2.onclick = function() {
                animation(box1,800);
                animation(box2,800);
            }
            function animation(element,target) {
                var step = 10;
                if (element.timeId) {
                    clearInterval(element.timeId);
                    element.timeId = null;
                }
                if (element.offsetLeft >= target) {
                    step = -(Math.abs(step));
                    console.log(step);
                }
                element.timeId = setInterval(function() {
                    if (Math.abs(element.offsetLeft - target) <= Math.abs(step)) {
                        element.style.left = target + 'px';
                        }else {
                            element.style.left = element.offsetLeft + step + 'px';
                        }
                    
                },30);
                
            }
        </script>
    </body>
    </html>

    运行结果:

  • 相关阅读:
    some math words
    图论中匹配问题的三种算法
    如何查看静态库和动态库是32位还是64位
    C/C++语言的版本, Visual Studio版本
    codeblocks
    文件类型
    上海职称评定
    微信登录
    手机归属地查询
    创建AOP静态代理(上篇)
  • 原文地址:https://www.cnblogs.com/xuanxuanlove/p/10211140.html
Copyright © 2011-2022 走看看