zoukankan      html  css  js  c++  java
  • 多物体运动2(几种运动共用一套)

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title></title>
    <style>
    div{
    150px;
    height: 150px;
    background: red;
    float: left;
    margin: 10px;
    font-size: 8px;

    }
    </style>
    <script>
    var timer = null;
    window.onload = function(){

    //***********************************************************
    var div1 = document.getElementById('div1');
    div1.timer = null;
    div1.onmouseover = function(){
    startMove(div1,'width',500);
    }
    div1.onmouseout = function(){
    startMove(div1,'width',150);
    }

    //***********************************************************
    var div2 = document.getElementById('div2');
    div2.timer = null;
    div2.onmouseover = function(){
    startMove(div2,'height',500);
    }
    div2.onmouseout = function(){
    startMove(div2,'height',150);
    }

    //***********************************************************
    var div3 = document.getElementById('div3');
    div3.timer = null;
    div3.onmouseover = function(){
    startMove(div3,'font-size',50);
    }
    div3.onmouseout = function(){
    startMove(div3,'font-size',10);
    }


    };

    function getStyle(obj,name){
    if(obj.currentStyle){
    return obj.currentStyle[name];
    }else{
    return getComputedStyle(obj,false)[name];
    }
    }

    function startMove(obj,element,target){
    clearInterval(obj.timer);
    obj.timer = setInterval(function(){
    var crrent = parseInt(getStyle(obj,element));
    var speed = (target-crrent)/6;
    speed = speed>0?Math.ceil(speed):Math.floor(speed);

    if(crrent == speed){
    clearInterval(obj.timer);
    }else{
    obj.style[element] = crrent + speed +'px';
    }
    },30);
    }

    </script>
    </head>
    <body>
    <div id="div1">变宽</div>
    <div id="div2">变高</div>
    <div id="div3">字体变化</div>

    </body>
    </html>

  • 相关阅读:
    android有点纠结的小问题
    持久化应用程序实例的状态
    preference activity框架
    RISC与CISC比较
    C++ const用法
    虚析构函数
    best-case analysis in real-time system
    jitter
    C/C++中static,const,inline三种关键字详细总结
    #pragma warning(disable 4786)
  • 原文地址:https://www.cnblogs.com/youcandomore/p/6679446.html
Copyright © 2011-2022 走看看