任务描述：

当鼠标移入“变宽”矩形时，该矩形宽度逐渐增加至400px，移出该矩形，宽度逐渐恢复至初始值;当鼠标移入“变高”矩形时，该矩形高度逐渐增加至400px，移出该矩形，高度逐渐恢复至初始值。

效果图：

<!DOCTYPE html>

<html>

<head lang="zh-CN">

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

    <title>多个div淡入淡出</title>

    <style>

        div {

            width: 200px;

            height: 200px;

            margin: 20px;

            float: left;

            background: yellow;

        }

    </style>

</head>

<body>

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

    <div id='div2'>变高</div>

    <script type="text/javascript">

//补充代码

    </script>

</body>

</html>

　　

参考代码：

function getStyle(obj, name) {

    if (obj.currentStyle) {

        return obj.currentStyle[name];

    }

    else {

        return getComputedStyle(obj, null)[name];

    }

}

function startMove(obj, attr, iTarget) {

    clearInterval(obj.timer);

    obj.timer = setInterval(function () {

        var 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);

        } else {

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

        }

    }, 30)

}

oDiv1 = document.getElementById('div1');

oDiv2 = document.getElementById('div2');

oDiv1.onmouseover = function () {

    startMove(this, 'width', 400)

}

oDiv1.onmouseout = function () {

    startMove(this, 'width', 200)

}

oDiv2.onmouseover = function () {

    startMove(this, 'height', 400)

}

oDiv2.onmouseout = function () {

    startMove(this, 'height', 200)

}

　　

JS多物体运动案例：变宽、变高的更多相关文章

  1. javascript多物体运动案例：多物体淡入淡出

    javascript多物体运动案例:多物体淡入淡出 任务描述: 补充代码,当鼠标移入红色区域时,该区域透明度逐渐增加至不透明;当鼠标移出该红色区域时,该区域透明度逐渐恢复至初始程度. 效果图: < ...

  2. js多物体运动之淡入淡出效果

    <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...

  3. js 多物体运动

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

  4. js和JQuery中的获取宽、高、位置等方法整理

    1.获取当前窗口宽度区别(需要注意的是用的window还是document)JQuery:console.log($(window).width()); //获取窗口可视区域的宽度 console.l ...

  5. js中网页区域/正文/屏幕 宽和高

    网页可见区域宽: document.body.clientWidth; 网页可见区域高: document.body.clientHeight; 网页可见区域宽: document.body.offs ...

  6. （42）JS运动之多物体框架--多个div变宽

    假设仅仅为div加入一个定时器的话.在多个div变宽的时候会发生故障.可是假设为每一个div加入一个定时器.那么就能够实现多个物体变宽. 注意:在多物体运动的情况下,全部东西不能共用.offsetXX ...

  7. js运动：多div变宽、二级菜单

    定时器及运动函数. 多div变宽: <!-- Author: XiaoWen Create a file: 2016-12-13 09:36:30 Last modified: 2016-12- ...

  8. JS多物体宽度运动案例

    任务 对于每一个Div区块,鼠标移入,宽度逐渐变宽,最宽值为400px,当鼠标移除时,宽度逐渐减小,最小值为100px. 任务提示: (1)多物体运动的定时器需要需要每个物体上同时最多只能开一个定时器 ...

  9. Javascript 可同时变大变宽等一系列效果运动框架——逐行分析代码，让你轻松了解运动的原理

    等待已久的可变大,变宽 等一系列效果运动框架出炉了,现在还是个初级版本,能满足需求.我们看看是如何实现的. 我们知道在Javascript 中 ‘.’等同于 ‘[]’ 例如: oDiv.style.h ...

随机推荐

  1. 多测师讲解_python_pycharm基本实用操作__保存代码_

    pycharm中中保存代码的方式: 方式一: 方式二: 第一步: 第二步:

  2. Rust之路（1）

    [未经书面许可,严禁转载]-- 2020-10-09 -- 正式开始Rust学习之路了! 思而不学则罔,学而不思则殆.边学边练才能快速上手,让我们先来个Hello World! 但前提是有Rust环境 ...

  3. RLP序列化算法

    RLP RLP(Recursive Length Prefix)递归长度前缀编码,是由以太坊提出的序列化/反序列化标准,相比json格式体积更小,相比protobuf对多语言的支持更强. RLP将数据 ...

  4. pytest文档44-allure.dynamic动态生成用例标题

    前言 pytest 结合 allure 描述用例的时候我们一般使用 @allure.title 和 @allure.description 描述测试用例的标题和详情. 在用例里面也可以动态更新标题和详 ...

  5. 【矩阵乘优化DP】涂色游戏

    题目大意 用 \(p\) 种颜色填 \(n\times m\) 的画板,要求任意相邻两列的颜色数都不少于 \(q\) ,求方案数. 数据范围 \(1\leq n\leq 100,1\leq m\leq ...

  6. Docker-V 详解

      1. 作用 挂载宿主机的一个目录. 2. 案例 譬如我要启动一个centos容器,宿主机的/test目录挂载到容器的/soft目录,可通过以下方式指定:   # docker run -it -v ...

  7. Java进阶专题(十五) 从电商系统角度研究多线程(下)

    前言 ​ 本章节继上章节继续梳理:线程相关的基础理论和工具.多线程程序下的性能调优和电商场景下多线程的使用. 多线程J·U·C ThreadLocal 概念 ​ ThreadLocal类并不是用来解决 ...

  8. swagger使用随笔

    2020-10-21 在一技术群里看到有个大佬想用 swagger 实现个功能:基础 Api 项目中写好通用的接口,配置好 swagger .上级项目直接引用项目,就能访问 swagger 起来用.相 ...

  9. Unity控制角色移动

    Copy代码前的准备工作 整体结构 建立个空对象命名随意,主要是为了:角色掉出地图时,可以回到空对象的位置 在建立个空对象命名为Player,放到PlayResurrectionPoints子级下,并 ...

  10. ssh执行命令

    执行一条命令 ssh user@ip command 执行多条命令 ssh user@ip "command1;command2" #分号隔开 关于转义 ssh user@ip ' ...