动画封装(最终版)

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .box1 {
            margin: 0;
            padding: 5px;
            height: 300px;
            background-color: #ddd;
            position: relative;
        }
        button {
            margin: 5px;
        }
        .box2 {
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
            left: 0;
            top: 40px;
        }
        .box3 {
            width: 100px;
            height: 100px;
            background-color: yellow;
            position: absolute;
            left: 0;
            top: 150px;
        }
    </style>
</head>
<body>
<div class="box1">
    <button>运动到200</button>
    <button>运动到400</button>
    <div class="box2"></div>
    <div class="box3"></div>
</div>

<script>

    var btnArr = document.getElementsByTagName("button");
    var box2 = document.getElementsByClassName("box2")[0];
    var box3 = document.getElementsByClassName("box3")[0];

    //绑定事件
    btnArr[0].onclick = function () {
        //如果有一天我们要传递另外一个盒子,那么我们的方法就不好用了
        //所以我们要增加第二个参数,被移动的盒子本身。
        animate(box2,200);
        animate(box3,200);
    }

    btnArr[1].onclick = function () {
        animate(box2,400);
        animate(box3,400);
    }

    function animate(ele,target){
        //要用定时器,先清除定时器
        //一个盒子只能有一个定时器,这样儿的话,不会和其他盒子出现定时器冲突
        //而定时器本身讲成为盒子的一个属性
        clearInterval(ele.timer);
        //我们要求盒子既能向前又能向后,那么我们的步长就得有正有负
        //目标值如果大于当前值取正,目标值如果小于当前值取负
        var speed = target>ele.offsetLeft?10:-10;
        ele.timer = setInterval(function () {
            //在执行之前就获取当前值和目标值之差
            var val = target - ele.offsetLeft;
            ele.style.left = ele.offsetLeft + speed + "px";
            //目标值和当前值只差如果小于步长,那么就不能在前进了
            //因为步长有正有负,所有转换成绝对值来比较
            if(Math.abs(val)<Math.abs(speed)){
                ele.style.left = target + "px";
                clearInterval(ele.timer);
            }
        },30)
    }

</script>
</body>
</html>

  

时间: 2024-11-05 20:48:22

动画封装(最终版)的相关文章

jQuery 3.0最终版发布,十大新特性眼前一亮

jQuery 3.0在日前发布了最终的全新版本.从2014年10月,jQuery团队对这个主要大版本进行维护开始,web开发者社区便一直在期待着这一刻的到来,终于在2016年6月他们迎来了这一个最终版www.lampbrother.net. 通过jQuery 3.0的版本更新说明,我们看到了一个保持着向后兼容的更轻便,更快速的jQuery.在本文中,我们将介绍一些令人眼前一亮的jQuery 3.0全新特性. 开始前的说明 如果你想要下载jQuery 3.0进行亲自实验,可以通过该页面进行下载.另

最终版的Web(Python实现)

天啦,要考试了,要期末考试了,今天把最终版的Python搭建Web代码先写这里记下了.详细的过程先不写了. 这次是在前面的基础上重写 HTTPServer 与 BaseHTTPRequestHandler,主要利用 python 提供 的 socket 进行编程,从而实现消息的接收与相应:然后再接着引入多线程,分别处理来自客户端的请求:最后实现根据客户端传递的参数动态生成页面的功能. 主要步骤如下: 一. .重写 HTTPServer 与 BaseHTTPRequestHandlerPython

结对项目--四则运算图形化最终版

四则运算器图形化最终版 (然而被我做成了奇怪的东西 组员:13070030张博文 13070033刘云峰 一.概念阶段 最初是想试试用android做个计算器app,无奈从零学起着实太赶,而且这个计划在试用了无比卡顿占内存的android studio后就彻底搁浅了. 然后就被路人谣传说MFC好用,无奈从零学起着实太赶,而且这个计划在无人指导的摸黑下也顺手搁浅了. 最终便沦为了EasyX旧传统,好歹有点基础,但果然还是不太甘心. 以及因为当初想做app,所以抠了iphone计算器的图想当UI,结

iOS_SN_push/pop转场动画封装和一般动画封装

封装类中的方法: 1 #import <Foundation/Foundation.h> 2 3 #import <UIKit/UIKit.h> 4 5 6 7 8 9 @interface AnimationEffect : NSObject 10 11 12 13 14 15 /** 16 17 * push/pop转场动画封装 18 19 * 20 21 * @param type 动画类型 22 23 * @param subType 动画子类型 24 25 * @para

理解《JavaScript设计模式与开发应用》发布-订阅模式的最终版代码

最近拜读了曾探所著的<JavaScript设计模式与开发应用>一书,在读到发布-订阅模式一章时,作者不仅给出了基本模式的通用版本的发布-订阅模式的代码,最后还做出了扩展,给该模式增加了离线空间功能和命名空间功能,以达到先发布再订阅的功能和防止名称冲突的效果.但是令人感到遗憾的是最终代码并没有给出足够的注释.这让像我一样的小白就感到非常的困惑,于是我将这份最终代码仔细研究了一下,并给出了自己的一些理解,鉴于能力有限,文中观点可能并不完全正确,望看到的大大们不吝赐教,谢谢! 下面是添加了个人注释的

成为C++高手之最终版计算器

下面做我们的计算器最终版. 当前还存在的问题是用户只能算一次.如果有人买一个一次性计算器,那么他肯定是个土豪.我们的计算器不能只给土豪用,所以要改成可以反复使用的. 使用循环语句就可以了,但是循环哪些代码呢?从用户输入到打印出结果这个过程要反复执行,代码如是: enum OPT{ jia = 1, jian, cheng, chu }; int main(void) { //保存用户输入的数 int number1; int number2; int opt;//运算符 //循环从输入到输出结果

寿星天文历Java封装整理版

由于生活和工作的原因,"寿星天文历"我一直没有动,长时间的丢弃后,当重新拾起时,比较费劲.编程就是这样,思维的火花只在当初的那一瞬,一旦熄灭,重新再点燃断掉的思维是很困难的.因为人的"忘记"能力,真的是挺强的,有时回顾或维护以前的代码时,常常会感叹道:这是我写的吗?够牛逼,看不懂!呵呵,这时候注释的作用的凸显出来了,尽管如此有时仅仅靠注释找以前的思路也是很困难. 跑题了,那么,首先对于等着"寿星天文历"封装整理版代码的各位,说声抱歉.这回整理的代

瞎j8封装第二版之数据层的封装

看了以前写的代码,对就是下面这个 手把手封装数据层之DataUtil数据库操作的封装 觉得以前写的代码好烂啊!!!,重新理了一下思路,写得更规范和简练,应该效率也会高很多,用了一下下午写的连接池(半废品...) 瞎j8封装第二版之数据库连接池 下面直接上代码,代码很好理解,就是用了简单的反射,注解的部分我都写了注释 package jdbc; import util.StringUtil; import java.lang.reflect.Field; import java.lang.refl

20172333 2017-2018-2 《程序设计与数据结构》实验2报告(最终版)

20172333 2017-2018-2 <程序设计与数据结构>实验2报告(最终版) 1.结对成员 李楠20172330 领航员:李楠 驾驶员:严域俊 成绩分配:五五开 2.相关测试过程及截图 [x] 完整一套流程截图(创建题目,中缀转后缀,计算后缀,对比答案,答案正确个数.) [x] 分数测试类单独测试截图 [x] 整数测试类单独测试截图 [x] 中缀转后缀单独测试截图 3.测试中遇到的问题及解决办法 这周主要问题所在:由于在最后计算测试类编写的时候运用的方法来自几个类的合并,导致了在输出答