一、前言

学习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)的更多相关文章

  1. JS完美运动框架

    这套框架实现了多物体,任意值,链式运动,多值运动,基本满足常见的需求. /* 功能:完美运动框架,可以实现多物体,任意值,链式运动,多值运动 版本:V1.0 兼容性:Chrome,FF,IE8+ (o ...

  2. JS完美运动框架【利用了Json】

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  3. JS 之完美运动框架

    完美运动框架是对原来的任意值运动框架的改善和效率的提升,即利用了json对属性进行封装,从而提高效率: window.onload=function(){ var oDiv=document.getE ...

  4. 【repost】JavaScript完美运动框架的进阶之旅

    运动框架的实现思路 运动,其实就是在一段时间内改变left.right.width.height.opactiy的值,到达目的地之后停止. 现在按照以下步骤来进行我们的运动框架的封装: 匀速运动. 缓 ...

  5. JavaScript “完美运动框架”

    /* “完美运动框架”,所谓“完美”,就是可以实现多个参数,多个物体运动互不影响的一个运动函数move(). * 大致结构如下:运动框架 EXP: move(obj,{width:200,height ...

  6. 2015.8.2js-19(完美运动框架)

    /*完美运动框架*/ //1.先清除定时期,2,获取样式,如果是opacity则单独解决,3,定义速度,4,定义当前值是否到达目的地,5,判断当前值是否到达目的地,6运动基本,如果是opacity f ...

  7. Javascript 完美运动框架——逐行分析代码，让你轻松了解运动的原理

    大家一听这名字就知道,有了这套框架 网上的效果基本都是可以实现的.实际上之前的运动框架还是有局限性的,就是不能让好几个值一块运动. 那这个问题怎么解决呢? 我们先来看看之前的运动框架 function ...

  8. JS 之完美运动框架 如何同时改变元素多个属性？

    正如改变一个属性的方法,可以使用已经写好的运动函数如move(obj,attr,target,fn);我们可能会想这样做, 调用两次运动函数,如同时改变宽和高,move(obj,'width',tar ...

  9. js 完美运动框架

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. csu1216（ Trie ）

    csu1216 题意 给定一些数,求这些数中两个数的异或值最大的那个值. 分析 转化成二进制数存入字典树,比如说要查询 \(0011\) ,显然和 \(1100\) 结合最优,所以我们直接在字典树上寻 ...

  2. SPOJ IITWPC4F - Gopu and the Grid Problem （双线段树区间修改 区间查询）

    Gopu and the Grid Problem Gopu is interested in the integer co-ordinates of the X-Y plane (0<=x,y ...

  3. [P1580] yyy loves Easter_Egg I

    Link: P1580 传送门 Solution: 拿来练练字符串的读入: 1.$gets()$相当于$c++$中的$getline()$,但返回值为指针!(无数据时为NULL) (都读入换行符,并将 ...

  4. HDOJ 5385 The path

    Dicription You have a connected directed graph.Let $d(x)$ be the length of the shortest path from $1 ...

  5. Codeforces 138D World of Darkraft（Multi-Nim）

    [题目链接] http://codeforces.com/problemset/problem/138/D [题目大意] H*W的棋盘中每个点都是L.R.X三者之一,两人轮流选一个点, 若为L则向左下 ...

  6. 【分块】bzoj1858 [Scoi2010]序列操作

    分块 Or 线段树 分块的登峰造极之题 每块维护8个值: 包括左端点在内的最长1段: 包括右端点在内的最长1段: 该块内的最长1段: 该块内1的个数: 包括左端点在内的最长0段://这四个是因为可能有 ...

  7. 微服务之SpringCloud实战（五）：SpringCloud Eureka详解

    Eureka详解 在第三节高可用中,实际已经讲解了服务的注册,只不过注册的是Eureka本身,原理相同,通过这几篇文章我相信大家对Eureka有了一定的了解,三个核心角色:服务注册中心.服务提供者和服 ...

  8. 【OpenJudge8464】【序列DP】股票买卖

    股票买卖 总时间限制: 1000ms 内存限制: 65536kB [描述] 最近越来越多的人都投身股市,阿福也有点心动了.谨记着“股市有风险,入市需谨慎”,阿福决定先来研究一下简化版的股票买卖问题. ...

  9. Linux下#!/usr/bin/env bash和#!/usr/bin/bash、#!/bin/bash的比较

    #!/usr/bin/env bash #在不同的系统上提供了一些灵活性. #!/usr/bin/bash #将对给定的可执行文件系统进行显式控制. 通过/usr/bin/env运行程序,用户不需要去 ...

  10. Inno Setup入门（十五）——Inno Setup类参考（1）

    Inno setup脚本能够支持许多的类,这些类使得安装程序的功能得到很大的加强,通过对这些类的使用,将会创建出许多让人惊奇的安装程序,下面开始类的学习. 创建自定义向导页 自定义向导页需要在Init ...