<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>

    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

    <title>Document</title>

    <style>

        #demo{

            width:100px;

            height:100px;

            background-color: pink;

            border:1px solid black;

            position:absolute;

            top:50px;

            left:100px;

            /*opacity:0.2;*/

        }

    </style>

</head>

<body>

<button id="btn1">宽度高度都是300</button>

<button id="btn2">top改为200，left改为300</button>

<button id="btn3">宽度高度都是400，top left都是400，opacity改为0.6</button>

<div id="demo"></div>

</body>

</html>

<script>

    function $id(id){return document.getElementById(id);}

    var btn1=$id("btn1");

    var btn2=$id("btn2");

    var btn3=$id("btn3");

    var demo=$id("demo");

    var timer=null;

    btn1.onclick=function () {

        var json={width:300,height:300};

        run(demo,json);

    }

    btn2.onclick=function () {

        var json={top:200,left:300};

        run(demo,json);

    }

    btn3.onclick=function () {

        var json={width:400,height:400,top:400,left:400,opacity:60 ,zIndex:2};

        run(demo,json);

    }

    function run(obj,json) {

        clearInterval(obj.timer);

        obj.timer=setInterval(function () {

            var flag=true; //用来判断定时器是否停止，一定写在遍历的外面，否则一遍历就true

            for(var  attr in json)

            {

                var cstyle=0;

                if(attr=="opacity")

                {

                    cstyle= Math.round(parseInt(getStyle(obj,attr)*100)) || 0;

                }

                else{

                    cstyle=parseInt(getStyle(obj,attr)); //获得当前属性

                }

                var step=(json[attr]-cstyle)/10; //计算步长

                step=step>0 ? Math.ceil(step) : Math.floor(step);

                //判断透明度

                 if(attr=="opacity") // 判断用户有没有输入透明度

                 {

                     if("opacity" in obj.style)  //判断浏览器支不支持opacity

                     {

                         obj.style.opacity=(cstyle+step)/100;

                     }

                      else

                     {

                          //obj.style.filter=alpha(opacity=30);

                          obj.style.filter="alpha(opacity="+(cstyle+step)*10+")";

                     }

                 }

                 //判断zIndex

                 else if(attr=="zIndex") //判断用户有没有输入zIndex

                 {

                    obj.style.zIndex=json[attr];

                 }

                  //不是opacity也不是zIndex的情况，加+"px"的属性

                 else{

                     obj.style[attr]=cstyle+step+"px";

                 }

                if(cstyle!=json[attr])  //在遍历中，只要有一个属性值没到达目标位置，定时器就不能停

                {

                    flag=false;

                }

            }

            if(flag)  //遍历完了之后，flag是true，所有的值都到达目标位置了，停止定时器，放在定时器里里面，每隔30毫秒可以判断一次是不是应该停止定时器了

            {

                clearInterval(obj.timer);

            }

        },30)

    }

    function getStyle(obj,attr) //返回谁的，哪个属性

    {

        if(obj.currrentStyle)

        {

            return obj.currentStyle[attr];

        }

        else{

            return  window.getComputedStyle(obj,null)[attr]; //w3c浏览器

        }

    }

</script>

　　

点击上方的任意一个按钮，下面的盒子相应的做出动画效果，

关键代码:     var json={width:400,height:400,top:400,left:400,opacity:60 ,zIndex:2};

　　　　　　run(demo,json);

　　　

封装运动框架基本函数（多个属性包括透明度和zIndex)的更多相关文章

  1. 第61天：json遍历和封装运动框架（多个属性）

    一.json 遍历  for in  关键字  for ( 变量 in  对象)  { 执行语句;  } 例如: var json = {width:200,height:300,left:50}co ...

  2. [js高手之路]封装运动框架实战左右与上下滑动的焦点轮播图

    在这篇文章[js高手之路]打造通用的匀速运动框架中,封装了一个匀速运动框架,我们在这个框架的基础之上,加上缓冲运动效果,然后用运动框架来做幻灯片(上下,左右),效果如下: 1 2 3 4 5 // 0 ...

  3. JS封装运动框架（另一种写法）

    function animate(obj, json, interval, sp, fn) { clearInterval(obj.timer); //var k = 0; //var j = 0; ...

  4. js中运动框架的封装

    //获取非行间样式的封装 function setStyle(obj,name){ // 考虑兼容性问题 if(obj.currentStyle){//不兼容火狐和谷歌 return obj.curr ...

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

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

  6. JS封装动画框架,网易轮播图,旋转轮播图

    JS封装动画框架,网易轮播图,旋转轮播图 1. JS封装运动框架 // 多个属性运动框架 添加回调函数 function animate(obj,json,fn) { clearInterval(ob ...

  7. js运动框架逐渐递进版

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

  8. 无限循环轮播图之运动框架（原生JS）

    封装运动框架 function getStyle(obj,name){ if(obj.currentStyle){ return obj.currentStyle[name]; }else{ retu ...

  9. JavaScript的运动框架学习总结

    一.目录 1. 入门案例——实现匀速运动 2. 入门案例——实现缓冲运动 3. 实现任意值的运动框架v.1 4. 改进任意值的运动框架v.2 5. 改进任意值的运动框架v.3 6. 实现链式运动框架 ...

随机推荐

  1. 2019新的开始,新的规划,庆祝CSDN访问量过千

    刚刚看了下博客访问量六千八百七十多个,然后我就自己刷新了一下,留个截图做纪念吧. 每一年都会有很多计划,然而到了年末却发现,未完成的还剩一大半,而完成的却屈指可数. 不过该立的flag还是要立的,顺便 ...

  2. C++入门经典-例5.1-输出变量的指针

    1:代码如下: // 5.1.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include <iostream> using ...

  3. LeetCode 2. 两数相加（Add Two Numbers）

    题目描述 给定两个非空链表来表示两个非负整数.位数按照逆序方式存储,它们的每个节点只存储单个数字.将两数相加返回一个新的链表. 你可以假设除了数字 0 之外,这两个数字都不会以零开头. 示例: 输入: ...

  4. 查询一个redis集群的大keys 脚本

    1. 把redis集群中的 master 节点信息记录在文件 redis_object_port.info 中, 方便下一步遍历各实例中的大 keys redis-cli -h 10.240.47.1 ...

  5. Eclipse Setting

    下载 https://www.eclipse.org/downloads/packages/ 自动保存代码 编码设置 代码自动提示 .abcdefghijklmnopqrstuvwxyz 字体大小设置 ...

  6. [SPSS]学习笔记--数据分布形状描述

    以下内容摘自:公众号- SPSS生活统计学 保存做复习之用. 峰度(Kurtosis) 峰度是描述总体(样本)中所有取值分布形态陡缓程度的统计量.通过计算可以得到峰度系数,峰度系数与分布形态的关系是: ...

  7. WPF复杂形状按钮

    方法很简单,将图片转换为<path>就可以了(需要用到Photoshop) 不过一般情况下制作按钮都不会用到这种方法,通常只要用image填充一张图片或者把路径转成按钮控件就可以了. 之所 ...

  8. nodejs 框架 中文express 4.xxx中文API手册

       介于最近express 中文文档比较难找的现状,特地找了一个,供大家学习思考 Express 4.x API express 翻译 api文档 中文 --     express() expre ...

  9. linux中zookeeper开机自启动和注册为服务

    1.安装jdk,zookeeper就不说啦,自己搜索下. 2.开机自启动和注册为服务. (1)开机自启动:编辑/etc/rc.d/rc.local文件,添加zkServer.sh路径. vi /etc ...

  10. c++ STL 【更新...】

    STL STL(标准模板库)是一套功能强大的 C++ 模板类,提供了通用的模板类和函数,这些模板类和函数可以实现多种流行和常用的算法和数据结构 核心包括以下三个组件: 容器(Containers) 容 ...