任务描述：

当鼠标移入“变宽”矩形时，该矩形宽度逐渐增加至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. xxe 新手学习记录

    在做某题时遇到了xxe漏洞,学习+记录 这里因为环境暂时关了,现在复现不了,所以在网络上又找到了一些xxe题目环境 这里有 PikaChu靶场里的xxe环境,这个环境可以在BUUCTF里开,但是这里我 ...

  2. 用flannel实现跨主机container通信

    最近在看kubernetes,看到了网络部分,这部分是集群设计的难点,也是我比较感兴趣的部分.书上提到不同node的container之间通信主要使用flannel,openvswitch等技术,这些 ...

  3. 2014年 实验四 B2B模拟实验（二）

    [实验目的] ⑴.熟悉电子合同签订过程 ⑵.掌握网上招标的流程并体会招标对采购商带来的好处 [实验条件] ⑴.个人计算机一台 ⑵.计算机通过局域网形式接入互联网 ⑶.电子商务模拟实验室软件包. [知识 ...

  4. 如何使用 Gin 和 Gorm 搭建一个简单的 API 服务 （三）

    修改数据结构   基本的 API 已经定义好了,现在是个修改 Person 对象结构的好时机.只要修改 Person 结构体,数据库和 API 都会自动做出相应的修改.   我要做的是在 Person ...

  5. 这是2020年最强Python学习路线，从入门到精通！

    给大家整理的这套python学习路线图,按照此教程一步步的学习来,肯定会对python有更深刻的认识.或许可以喜欢上python这个易学,精简,开源的语言.全民学Python的话题铺天盖地,中国的Py ...

  6. naicat如何查看表关系

    1.navict版本为:navict premium https://www.php.cn/tool/navicat/427617.html 参考上面链接 2. 这个版本的 目前就这些,后续进行补充

  7. 给定 n 个字符串，求有多少字符串是其他字符串的前缀。

    1 #include <cstdio> 2 #include <set> 3 #include <iostream> 4 #include <cstring& ...

  8. build设计模式

    又叫生成器模式 public class MainActivity extends AppCompatActivity { TextView textView; Button button; prot ...

  9. 重新开始记录java教程

    最近在工作上学到了很多的知识和经验,以后每天都来记录给博客园上面

  10. 20200726_java爬虫_使用HttpClient模拟浏览器发送请求

    浏览器获取数据: 打开浏览器 ==> 输入网址 ==> 回车查询 ==> 返回结果 ==> 浏览器显示结果数据 HttpClient获取数据: 创建HttpClient ==& ...