zoukankan      html  css  js  c++  java
  • js实现多物体运动

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            div{
                 200px;
                height: 100px;
                margin: 20px;
                float: left;
                background: red;
                border: blue 1px solid;
            }
        </style>
        <script>
            window.onload = function () {
                var oDiv = document.getElementById('div1');
                var oDiv2 = document.getElementById('div2')
                    oDiv.onmouseover = function(){
                        startMove(this,"height",300);
                    };
                    oDiv.onmouseout = function(){
                        startMove(this,"height",100);
                    };
                    oDiv2.onmouseover = function(){
                        startMove(this,"width",400);
                    };
                    oDiv2.onmouseout = function(){
                        startMove(this,"width",200);
                    }
            }
            function getStyle(obj,name){
                if (obj.currentStyle) {
                    return obj.currentStyle[name];
                } else {
                    return getComputedStyle(obj,false)[name]
                }
            }
            //var alpha = 30;所有的东西都不能公用
            function startMove (obj,attr,iTarget) {
                clearInterval(obj.time);
                obj.time = setInterval(function(){
                    var cur = parseInt(getStyle(obj,attr));
                    var speed = (iTarget-cur)/6;
                    speed = speed>0?Math.ceil(speed):Math.floor(speed);
                    if (cur == iTarget) {
                        clearInterval(obj.time);
                    } else {
                       obj.style[attr] = cur+speed+'px';
                    } 
                },30)
            }
        </script>
    </head>
    <body>
        <div id="div1">变高</div>
        <div id="div2">变宽</div>
    </body>
    </html>
  • 相关阅读:
    HTB-靶机-Lazy
    HTB-靶机-Brainfuck
    HTB-靶机-October
    java编程思想-java注解
    HMAC的JAVA实现和应用
    HMACSHA1算法的JAVA实现
    常见软件安全漏洞样例代码
    [移动应用安全]移动应用安全培训PPT
    [标准性文档]WEB应用安全验证标准
    [安全测试报告]针对某厂商的一次渗透性测试
  • 原文地址:https://www.cnblogs.com/520yh/p/12893639.html
Copyright © 2011-2022 走看看