javascript链式运动框架

任务描述：

当鼠标移入红色矩形时，该矩形宽度逐渐增加至400px，之后高度逐渐增加至400px;

当鼠标移出红色矩形时，该矩形高度逐渐减小至200px，之后宽度逐渐减小至200px。

效果图：

<!DOCTYPE html>

<html lang="zh-CN">

<head>

  <meta charset="UTF-8">

  <title>JS小案例：多物体变宽</title>

  <style>

    body {

      height: 2000px;

      margin: 0px;

    }

    div {

      width: 200px;

      height: 200px;

      background: red;

      margin: 10px;

    }

  </style>

  <script>

    window.onload = function () {

      //补充代码

    }

  </script>

</head>

<body>

  <div id='div1'></div>

</body>

</html>

　　

参考代码：

oDiv1 = document.getElementById('div1');

oDiv1.onmouseover = function () {

    startMove(oDiv1, 'width', 400, function () {

        startMove(oDiv1, 'height', 400)

    });

}

oDiv1.onmouseout = function () {

    startMove(oDiv1, 'height', 200, function () {

        startMove(oDiv1, 'width', 200)

    });

}

function getStyle(obj, name) {

    if (obj.currentStyle) {

        return obj.currentStyle[name];

    }

    else {

        return getComputedStyle(obj, null)[name];

    }

}

function startMove(obj, attr, iTarget, fnEnd) {

    clearInterval(obj.timer);

    obj.timer = setInterval(function () {

        var cur = 0;

        if (attr == 'opacity') {

            //Math.round()四舍五入取整主要是针对低浮点数的精度问题。

            cur = Math.round(parseFloat(getStyle(obj, attr)) * 100);

        } else {

            cur = parseInt(getStyle(obj, attr));

        }

        var speed = (iTarget - cur) / 6;

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

        if (cur == iTarget) {

            clearInterval(obj.timer);

            if (fnEnd) {

                fnEnd();

            }

        } else {

            if (attr == 'opacity') {

                obj.style.opacity = (cur + speed) / 100;

                obj.style.filter = 'alpha(opacity=' + (cur + speed) + ")";

            }

            else {

                obj.style[attr] = cur + speed + 'px';

            }

        }

    }, 30)

}

　　

javascript链式运动框架案例的更多相关文章

  1. Javascript 链式运动框架——逐行分析代码，让你轻松了解运动的原理

    所谓链式运动,就是一环扣一环.我们的很多运动实际上来说指的就是分阶段的,第一个阶段动完,下个阶段开始动. 这个链式运动框架就是用来处理这些问题的. 我们先来看下之前的运动框架,以下是Javascrip ...

  2. Javascript之链式运动框架1

    第一部分:HTML内容: <script src="6-1.js"></script> <script> window.onload=funct ...

  3. （43）JS运动之链式运动框架

    链式运动框架就是一系列的运动分阶段进行,在普通的运动框架上加上一个參数function,这个function表示下一个要运行的动作.详细代码例如以下: <!DOCTYPE HTML> &l ...

  4. javascript学习-原生javascript的小特效（原生javascript实现链式运动）

    以下代码就不详细解析了,在我之前的多个运动效果中已经解析好多次了,重复的地方这里就不说明了,有兴趣的童鞋可以去看看之前的文章<原生javascript的小特效> <!DOCTYPE ...

  5. 原生JavaScript运动功能系列（四）：多物体多值链式运动

    原生JavaScript运动功能系列(一):运动功能剖析与匀速运动实现 原生JavaScript运动功能系列(二):缓冲运动 原生JavaScript运动功能系列(三):多物体多值运动 多物体多值链式 ...

  6. HTML+JavaScript实现链式运动特效

    在学习js的过程中,发现这家伙做特效真是不错,尽管说眼下水平还不够,只是也能写点简单的效果. 今天分享一个简单的运动框架.然后利用这个框架实现简单的链式运动特效. 1.move.js 在运动框架中.主 ...

  7. JavaScript运动_封装模板(支持链式运动、完美运动)

    最近自学到了JS运动部分,自己整理了一些js模板,望采纳. 1.支持链式运动的模板: 先解释一下函数中的几个参数含义: 1)obj: 要操作的对象 2)target: 属性要到达的目标值 3)attr ...

  8. Javascript 链式作用域 function fn(){}和var fn=function(){}区别

    其实对于Javascript链式作用域的描述,包括,JS权威指南,都有些太冗长了--但是很准确:JavaScript中的函数运行在他们被定义的作用域里,而不是他们被执行的作用域里. 这句话有点难懂,但 ...

  9. js动画--链式运动

    前面几节我们只是讲述了一种运动,这节课我将讲述链式运动:就以一个动作接着一个动作完成. 对于这个实现,我们只需要改变一下就可以实现了,设置一个回调函数. var timer; window.onloa ...

随机推荐

  1. navicat 生成注册码( 仅供学习使用 )

    前言,由于navicat使用比较顺手,刚好前段时间试用期到,又看看了怎么生成注册码,特地记录下使用 . 1.运行 找到 navicat 文件(exe) 2.生成注册文件(报错好,后续会用到) 3.断网 ...

  2. 实验四  CSS样式的应用

    实验四  CSS样式的应用 注意:以下实验项目皆以本文件为操作对象,实验结果用记事本保留后预览,最后将添加的CSS代码转载到实验报告中 另本网页中蓝色加下划线的字即为默认的超链接样式 实验目的: 掌握 ...

  3. APP脱壳方法三

    第一步 手机启动frida服务 第二步 手机打开要脱壳的app 第三步编辑hook代码 agent.js /* * Author: hluwa <hluwa888@gmail.com> * ...

  4. MySql中varchar(10)和varchar(100)的区别

    背景 许多使用MySQL的同学都会使用到varchar这个数据类型.初学者刚开始学习varchar时,一定记得varchar是个变长的类型这个知识点,所以很多初学者在设计表时,就会把varchar(X ...

  5. linux-mint18 (ubuntu 16) 安装python3

    直接执行命令: sudo apt-get install python3 将python3设置为默python版本: sudo update-alternatives --install /usr/b ...

  6. org.apache.rocketmq.client.exception.MQClientException: No route info of this topic, TopicTest异常解决

    使用RocketMQ发送消息抛出异常,异常如下: 原因: Broker 禁止自动创建Topic,且用户没有通过手动创建此Topic,或者broker 和 Nameserver网络不通: 解决方案: 1 ...

  7. 在嵌入式设备中实现webrtc的第三种方式①

    最近两年,我对于网络知识,包括底层协议学习比较多,webrtc这种几乎是使用到了所有层面网络协议的技术也逐渐进入我的视野. 之前我提出了两种在嵌入式设备上实现webrtc的方式,一是用官方代码,然后改 ...

  8. STM32入门系列-STM32时钟系统，时钟使能配置函数

    之前的推文中说到,当使用一个外设时,必须先使能它的时钟.怎么通过库函数使能时钟呢?如需了解寄存器配置时钟,可以参考<STM32F10x中文参考手册>"复位和时钟控制(RCC)&q ...

  9. 2.3 spring5源码系列---内置的后置处理器PostProcess加载源码

    本文涉及主题 1. BeanFactoryPostProcessor调用过程源码剖析 2. 配置类的解析过程源码 3. 配置类@Configuration加与不加的区别 4. 重复beanName的覆 ...

  10. 4G DTU的应用场景介绍

    4G DTU因为信号要比传统的gprs网络要好,目前已经被广泛应用于物联网产业链中的M2M行业,以远向4G DTU LTE-520为例,它的应用场景如智能电网.智能交通.智能家居.金融.移动 POS ...