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;
            }
            #div3{
                 200px;
                height: 100px;
                margin: 20px;
                float: left;
                background: red;
                filter: alpha(opacity:30);
                opacity: 0.3;
            }
        </style>
        <script>
            window.onload = function () {
                var oDiv = document.getElementById('div1');
                var oDiv2 = document.getElementById('div2');
                var oDiv3 = document.getElementById('div3')
                    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);
                    }
                    oDiv3.onmouseover = function(){
                        startMove(this,"opacity",100);
                    };
                    oDiv3.onmouseout = function(){
                        startMove(this,"opacity",30);
                    }
            }
            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 = 0;
                    if (attr == 'opacity') {
                          cur = Math.round(parseFloat(getStyle(obj,attr))*100);
                    } else {
                        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 {
                        if (attr == 'opacity') {
                            obj.style.filter = 'alpha(opacity:'+(cur+speed)+')';
                            obj.style.opacity = (cur+speed)/100;
                        } else {
                            obj.style[attr] = cur+speed+'px';
                        }
                    } 
                },30)
            }
        </script>
    </head>
    <body>
        <div id="div1">变高</div>
        <div id="div2">变宽</div>
        <div id="div3">透明度</div>
    </body>
    </html>
  • 相关阅读:
    7-3.自定义列表
    GoLang 使用协程与管道随机生成姓名
    [Unity3D] 点击物品显示物品信息
    [Unity3D] 碰撞物体添加到背包
    [PS] DDS文件导入插件
    [Unity3D] 给角色添加武器
    [Unity3D] 刚体 碰撞器 触发器
    [Unity3D] 物体的几种移动方法
    [Unity3D] 解决导入的模型出现闪烁的问题
    [Unity3D] 人物角色跳跃(动画跳跃&刚体跳跃)
  • 原文地址:https://www.cnblogs.com/520yh/p/12893752.html
Copyright © 2011-2022 走看看