zoukankan      html  css  js  c++  java
  • JS完美运动框架

    多个值同时变化

    setStyle同时设置多个属性

    参数传递

    json的使用

    for  in遍历属性

    <!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{
                width: 200px;
                height: 200px;
                background: red;
                margin: 20px;
                filter: alpha(30);
                opacity: 0.3;
            }
        </style>
       
        <script>
            window.onload = function(){
                var oDiv = document.getElementById('div');
                oDiv.onmouseover = function () {
                    startMove(oDiv, {202,height:300,opacity:100},function () {
                        console.log(123)//判断定时器有没有停止
                    })
                }
            }
        </script>
    </head>
    <body>
        <div id="div"></div>
    </body>
    <script src="move2.js"></script>
    </html>

    move2.js

    function getStyle(obj,name){
        if (obj.currentStyle) {
            return obj.currentStyle[name];
        } else {
            return getComputedStyle(obj,false)[name]
        }
    }
    //var alpha = 30;所有的东西都不能公用
    function startMove (obj,json,fnEnd) {
        clearInterval(obj.time);
        obj.time = setInterval(function(){
            var bStop=true;//假设所有的值都到了
            for(var attr in json){
                var cur = 0;
                if (attr == 'opacity') {
                    cur = Math.round(parseFloat(getStyle(obj,attr))*100);
                } else {
                    cur = parseInt(getStyle(obj,attr));
                }
                var speed = (json[attr]-cur)/6;
                speed = speed>0?Math.ceil(speed):Math.floor(speed);
    
                if(cur !== json[attr]){//如果有一个值没到
                    bStop=false;//设置为fslse
                }
                if (attr == 'opacity') {
                    obj.style.filter = 'alpha(opacity:'+(cur+speed)+')';
                    obj.style.opacity = (cur+speed)/100;
                } 
                else {
                    obj.style[attr] = cur+speed+'px';
                }
            }
                if (bStop) {
                    clearInterval(obj.time);
                    if (fnEnd) fnEnd();
                }
           
        },30)
    }
  • 相关阅读:
    shell学习(11)- seq
    bash快捷键光标移动到行首行尾等
    shell学习(10)- if的使用
    Python 执行 Shell 命令
    查看 jar 包加载顺序
    Linux 中的 sudoers
    Ubuntu 开机启动程序
    指定 Docker 和 K8S 的命令以及用户
    Spark on K8S(Standalone)
    Spark on K8S (Kubernetes Native)
  • 原文地址:https://www.cnblogs.com/520yh/p/12894953.html
Copyright © 2011-2022 走看看