zoukankan      html  css  js  c++  java
  • JavaScript move简易版运动框架封装

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="{CHARSET}">
    <title></title>
    <style type="text/css">
    #box{
    1000px;
    height: 100px;
    margin-left: 50px;
    background: red;

    }
    </style>

    </head>
    <body>
    <div id="box"> </div>
    <script type="application/javascript">
    var oBox = document.getElementById('box');

    move(oBox,'width','300',5);

    function move(obj,attr,target,speed){
    //获取元素对象宽度
    var Val = parseInt(getStyle(obj,attr));
    var onOff=true;
    if(Val > target){
    speed =-speed;
    onOff = false;
    }

    var timer = setInterval(function(){
    Val+=speed;
    if(onOff==false){
    if(Val<=target){
    Val = target;
    clearInterval(timer);
    }
    }
    else if(onOff==true)
    {
    if(Val>=target)
    Val = target;
    clearInterval(timer);
    }

    obj.style[attr] = Val+'px';

    },13);
    function getStyle(obj,attr){
    return obj.currentStyle?ojb.currentStyle[attr]:getComputedStyle(obj)[attr];

    }


    }



    </script>
    </body>
    </html>

  • 相关阅读:
    指针数组和数组指针
    initializer_list
    main:处理命令行选项
    Synchronized 和Lock区别
    sleep和wait的区别
    什么时候会发生类初始化
    类的加载与ClassLoader的理解
    获取Class类的实例
    元注解
    IO流思维导图
  • 原文地址:https://www.cnblogs.com/jessi/p/5454868.html
Copyright © 2011-2022 走看看