任务描述：

当鼠标移入“变宽”矩形时，该矩形宽度逐渐增加至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. Angluar2 项目搭建

    一 使用 Angular CLI 官方脚手架 1.安装 cli npm install -g @angular/cli 2.创建工作空间和初始应用 ng new my-app 二 tsLint 代码格 ...

  2. 多测师讲解python _练习题002_高级讲师肖sir

    # 1.求出1/1+1/3+1/5--+1/99的和 # 2.用循环语句,计算2-10之间整数的循环相乘的值. # 3.用for循环打印九九乘法表 # 4.求每个字符串中字符出现的个数如:hellow ...

  3. 彻底根治window弹窗小广告（今日热点）

    在一个阴雨蒙蒙的下午,我上完厕所回到工位,输入锁屏密码,解锁,蹦出来三个小广告,我......这还能忍??? 废话不多说,开搞! 一.广告分为两种: 红色字的今日热点 蓝色字的今日热点 二.追溯根源: ...

  4. day67:Vue:es6基本语法&vue.js基本使用&vue指令系统

    目录 Vue前戏:es6的基本语法 1.es6中的let特点 1.1.局部作用域 1.2.不存在变量提升 1.3.不能重复声明 1.4.let声明的全局变量不从属于window对象,var声明的全局变 ...

  5. day35 Pyhton 网络编程02

    一内容回顾 网络基础 网络应用开发架构 B/S架构   浏览器直接作为客户端的程序 C/S架构 B/S是特殊的C/S osi七层模型 应用层  python代码   http  https  ftp  ...

  6. pytest学习纪要123-针对经常用到的内容详实记录

    pytest123 本文主要参考:https://www.cnblogs.com/yoyoketang/tag/pytest 如有侵权,请站内联系我 目录 pytest123 1.setup和tear ...

  7. 【C语言入门】"为什么这个又错了啊"来自编程初学者常见错误合辑！

    C语言的最大特点是:功能强,使用方便灵活. C编译的程序对语法检查并不象其它高级语言那么严格,这就给编程人员留下"灵活的 余地",但还是由于这个灵活给程序的调试带来了许多不便,尤其 ...

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

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

  9. spring boot:使用async异步线程池发送注册邮件(spring boot 2.3.1)

    一,为什么要使用async异步线程池? 1,在生产环境中,有一些需要延时处理的业务场景: 例如:发送电子邮件, 给手机发短信验证码 大数据量的查询统计 远程抓取数据等 这些场景占用时间较长,而用户又没 ...

  10. Java Map转成xml标签字符串

    一个简单的java实现,供参考: package com.trilogy.session.data; import java.lang.reflect.Field; import java.util. ...