码迷,mamicode.com
首页 > 其他好文 > 详细

多用途运动框架

时间:2014-05-12 20:17:59      阅读:357      评论:0      收藏:0      [点我收藏+]

标签:style   blog   class   code   java   tar   

该运动框架可以用于改变宽度、高度、字体大小、透明度、Left、top等值

 

先上一个获取真正样式的函数

bubuko.com,布布扣
//定义getStyle函数,获取真正样式
function getStyle(obj,attr){
    if(obj.currentStyle){//兼容IE
        return obj.currentStyle[attr];
    }else if(window.getComputedStyle(obj,false)){//兼容FF
        return getComputedStyle(obj,false)[attr]; 
    };
};
bubuko.com,布布扣

 

然后上都是主体部分:

bubuko.com,布布扣
//参数为对象,属性,目标值
function move(obj,json,fnEnd){
    clearInterval(obj.timer);
    
    obj.timer = setInterval(startmove,30);
    
    function startmove(){
        var bBtn = true;  //定义开关,初始值为真,如果全部属性达到目标值,则清除定时器
        
        for(var attr in json){  //循环json,处理没一个JSON属性值
            var iSpeed,iCur=0;
        
            if(attr == "opacity"){
                iCur = Math.round(parseFloat(getStyle(obj,attr)) * 100); // 如果传入的属性是透明度,则转换为百分制
            }else{
                iCur = Math.round(parseFloat(getStyle(obj,attr)));//获取当前属性的真正值
            };
            iSpeed = (json[attr]  - iCur) / 8;
            iSpeed = (iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed)); // 当速度大于0是向上取整,小于0向下取整

            if(iCur != json[attr]){
                bBtn = false;
            }
            if(attr == "opacity"){
                obj.style.opacity =  (iCur + iSpeed)/100; 
                obj.style.filter = "alpha(opacity:" + iCur + iSpeed + ")";            
            }else{
                obj.style[attr] = iCur + iSpeed + "px";
            };
        };
        if(bBtn){
            clearInterval(obj.timer);
            if(fnEnd){
                fnEnd.call(obj);
            };                
        };
    };
    
};
bubuko.com,布布扣

 

  

多用途运动框架,布布扣,bubuko.com

多用途运动框架

标签:style   blog   class   code   java   tar   

原文地址:http://www.cnblogs.com/fyima/p/3722181.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!