任务描述：

当鼠标移入“变宽”矩形时，该矩形宽度逐渐增加至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. 热力图 vue 项目中使用热力图插件 “heatmap.js”（保姆式教程）

    我现在写的这项目是用CDN引入 heatmap.js, 可根据自己项目情况使用哪种方式引入插件. 官网地址 "https://www.patrick-wied.at/static/heatm ...

  2. oracle 11g linux 导入中文字符乱码问题解决

    1. 涉及的字符集 这个可以分成三块,数据库服务器字符集(server).实例字符集(instance), 会话字符集(session) 2. 乱码的原因 session 的字符集和 server 的 ...

  3. 多测师讲解selenium ——切换窗口——打印句柄_高级讲师肖sir

    (一)同一个窗口打开两个浏览器 from selenium import webdriverfrom time import sleepdrvier=webdriver.Chrome()url='ht ...

  4. 云服务器、euleros系统自动断开连接解决方案

    我这里的云服务器,网上查的修改sshd.config文件并不有效 我提供另一种方法解决这个问题: vim /etc/profile 再最底部新增 export TMOUT=6000 #6000代表60 ...

  5. MeteoInfoLab脚本示例：Trajectory

    示例读取HYSPLIT模式输出的气团轨迹数据文件,生成轨迹图层,并显示轨迹各节点的气压图.脚本程序: f = addfile_hytraj('D:/MyProgram/Distribution/jav ...

  6. Springboot配置excludePathPatterns不生效

    Springboot添加拦截器配置excludePathPatterns不生效 code: @Configurationpublic class ServiceConfig implements We ...

  7. 【CF1428D】Bouncing Boomerangs 题解

    原题链接 题意简介 毒瘤大模拟 给你一张n*n的图,在图上摆有一些物体.从每一列的底端往上扔回旋镖,每镖中一个东西,回旋镖就会向右转九十度.现在我们知道从每列i底端往上镖时撞上的物体个数ai,试构造出 ...

  8. 接入WxPusher微信推送服务出现错误：Content type 'application/x-www-form-urlencoded;charset=UTF-8' not supported

    背景 使用WxPusher微信推送服务 ,可以及时的将服务的一些运行异常信息,发送到自己的微信上,方便了解服务的运行状态(PS:这个服务是免费的). 你可以在这里看到WxPusher微信推送服务的接入 ...

  9. swoft实现自动重启服务 转

    目的:1.上传代码后HTTP服务自动重启,不需要自己手动执行:php bin/swoft http:start2.自动重启适用于开发调试阶段,因为不能再后台运行所以在线上环境的话还是要重启http服务 ...

  10. eShopOnContainers 知多少[12]：Envoy gateways

    1. 引言 在最新的eShopOnContainers 3.0 中Ocelot 网关被Envoy Proxy 替换.下面就来简要带大家了解下Envoy,并尝试梳理下为什么要使用Envoy替代Ocelo ...