码迷,mamicode.com
首页 > Web开发 > 详细

完美运动框架(js)

时间:2015-03-07 19:56:52      阅读:3089      评论:0      收藏:0      [点我收藏+]

标签:

一、前言

学习js运动时,由于在实现多种不同运动效果过程中很多代码是重复的,故将其封装达到代码重用。

二、代码封装重用

function startMove(obj, json, fnEnd){

    clearInterval(obj.timer);//若物体之前开有定时器则先关闭

    obj.timer = setInterval(function(){
        var bStop = true; //假设所有的属性值运动到了目标值
        for(var attr in json){//遍历物体传过来的json值
            var start = 0;
            if(attr === ‘opacity‘){//透明度
                start = Math.round(parseFloat(getStyle(obj, attr))*100);
            }else{//非透明度属性
                start = parseInt(getStyle(obj, attr));
            }
            if(start != json[attr]){//若有属性值未运动到目标值,将bStop的值赋为false
                bStop = false;
            }
            var speed = (json[attr] - start)/6;
            speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);//速度为正值向上取整,速度为负值向下取整
            if(attr === ‘opacity‘){
                obj.style.filter = ‘alpha(opacity:‘+ (start + speed) +‘)‘;//IE浏览器
                obj.style.opacity = (start + speed)/100;//非IE浏览器
            }else{
                obj.style[attr] = start + speed + ‘px‘;
            }
        }
        if(bStop){//所有的属性值都运动到了目标值,则关闭定时器并执行回调函数
            clearInterval(obj.timer);
            if(fnEnd)fnEnd();
        }
    }, 30);
}

function getStyle(obj, attr){//获取当前属性的值
    if(obj.currentStyle){
        return obj.currentStyle[attr];
    }else{
        return getComputedStyle(obj, false)[attr];
    }
}

三、测试并结果分析

将上面封装的代码保存为moveFrame.js文件,并导入如下测试代码中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title完美运动框架应用举例(满足多个属性值同时运动)</title>
    <style type="text/css">
        #one{width: 100px;height: 100px;background-color: red;filter:alpha(opacity:40);opacity: 0.4;}
    </style>
    <script type="text/javascript" src="moveFrame.js"></script>
    <script type="text/javascript">
        window.onload = function(){
            var oBtn = document.getElementById(btn);
            var oDiv = document.getElementById(one);
            oBtn.onclick = function(){
                startMove(oDiv, {width : 200, height : 400, opacity : 100}, function(){
                    alert(successful);
                });
            };
        };
    </script>
</head>
<body>
    <input type="button" id="btn" value="多属性值同时运动">
    <div id="one"></div>
</body>
</html>

测试结果为:chrome、FF、IE6+、Opera、Safari结果都一致。

四、总结

不管做什么特效,如图片轮播、滑动门特效、淡入淡出等,凡与运动相关都可以直接引入此框架。

本人前端菜鸟,希望这篇文章能对大家有所启发,文中有误导大家的地方,希望大伙海涵并给予指正。如果您觉得文章对您有所帮助,您的留言和推荐将对我是莫大的鼓舞!

此文章发布在本人博客园Developer_chang,如需转载本文,请注明来源: http://www.cnblogs.com/changjianqiu/

完美运动框架(js)

标签:

原文地址:http://www.cnblogs.com/changjianqiu/p/4320814.html

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