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

    //获取非行间样式
    function getStyle(obj,attr){
        if(obj.currentStyle){
            return obj.currentStyle[attr];
        }else{
            return getComputedStyle(obj,false)[attr];
        }
    }
     
    //运动
    function action(obj,json,fn){
        //关闭此obj的定时器,防止多次触发冲突
        clearInterval(obj.timer);
        obj.timer = setInterval(function(){
     
            //当flag为true时,关闭所有定时器
            var flag = true;
     
            //循环遍历json里的所有 key 即 obj的属性
            for(var attr in json){
                //先声明当前属性的值为0
                var i_cur = 0;
                //获取此非行间样式即属性的值(opacity 比较特殊,因为其没有px,先*100为了去掉小数点,防止bug)
                if(attr == "opacity"){
                    i_cur = parseInt(getStyle(obj,attr)*100)
                }else{
                    i_cur = parseInt(getStyle(obj,attr));
                }
               //速度
                //定义速度,其公式为 (目标值 - 获取的当前属性的值)/8 8是比较适合的
                var speed = (json[attr] - i_cur)/8;
                //取整,杜绝bug
                speed = speed>0?Math.ceil(speed):Math.floor(speed);
     
                //判断终止条件
                //对于所有的属性,只要值未达到目标值,定时器就不会关闭
                if(json[attr] != i_cur){
                    flag = false
                };
                //运动
     
                //若属性为 透明,则做特殊计算
                if(attr == "opacity"){
                    obj.style.opacity = (i_cur + speed)/100;
                    obj.style.filter = "alpha(opacity = "+(i_cur+speed)+")"
                }else{
                    //否则则 直接运动+px
                    obj.style[attr] = (i_cur + speed) +"px"
                }
            }
            //关闭 并 回调
            //所有属性达到目标值,关闭当前的定时器
            if(flag){
                clearInterval(obj.timer)
                //回调函数,用于一个定时器可以触发多个物体运动
                if(fn){
                    fn()
                }
                // 简写为 fn&&fn();
            }
     
        },30)
    }
     
    //如何调用的小例子
    oBox1.onmouseover = function(){
        action(this,{400,height:200},function(){
            action(oBox2,{opacity:100})
       });
    }
     
    oBox2.onmouseover = function(){
        action(this,{opacity:100},function(){
            action(oBox1,{300,height:180})
        });
    }
  • 相关阅读:
    winForm ComboBox 控件默认值绑定及只可选择不可输入设定处理
    [c#]CacheHelper缓存类
    access数据库用sql语句添加字段,修改字段,删除字段
    35岁前程序员要规划好的四件事
    C#将网页内容转换成图片保存到本地( webbrowser 可应用于B/S结构中)
    SQL中返回刚插入记录的ID
    JIRA破解
    C#数组查找与排序
    最好的缺陷管理软件下载及破解Jira3.10 Enterprise Edition
    sql2000数据库 sql语句C#分页类代码
  • 原文地址:https://www.cnblogs.com/WanerWei/p/9546530.html
Copyright © 2011-2022 走看看