JS多物体运动案例：变宽、变高
任务描述：
当鼠标移入“变宽”矩形时，该矩形宽度逐渐增加至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多物体运动案例：变宽、变高的更多相关文章
- javascript多物体运动案例：多物体淡入淡出
javascript多物体运动案例:多物体淡入淡出 任务描述: 补充代码,当鼠标移入红色区域时,该区域透明度逐渐增加至不透明;当鼠标移出该红色区域时,该区域透明度逐渐恢复至初始程度. 效果图: < ...
- js多物体运动之淡入淡出效果
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...
- js 多物体运动
<!doctype html> <html> <head> <meta charset = "utf-8"> <title&g ...
- js和JQuery中的获取宽、高、位置等方法整理
1.获取当前窗口宽度区别(需要注意的是用的window还是document)JQuery:console.log($(window).width()); //获取窗口可视区域的宽度 console.l ...
- js中网页区域/正文/屏幕 宽和高
网页可见区域宽: document.body.clientWidth; 网页可见区域高: document.body.clientHeight; 网页可见区域宽: document.body.offs ...
- （42）JS运动之多物体框架--多个div变宽
假设仅仅为div加入一个定时器的话.在多个div变宽的时候会发生故障.可是假设为每一个div加入一个定时器.那么就能够实现多个物体变宽. 注意:在多物体运动的情况下,全部东西不能共用.offsetXX ...
- js运动：多div变宽、二级菜单
定时器及运动函数. 多div变宽: <!-- Author: XiaoWen Create a file: 2016-12-13 09:36:30 Last modified: 2016-12- ...
- JS多物体宽度运动案例
任务 对于每一个Div区块,鼠标移入,宽度逐渐变宽,最宽值为400px,当鼠标移除时,宽度逐渐减小,最小值为100px. 任务提示: (1)多物体运动的定时器需要需要每个物体上同时最多只能开一个定时器 ...
- Javascript 可同时变大变宽等一系列效果运动框架——逐行分析代码，让你轻松了解运动的原理
等待已久的可变大,变宽 等一系列效果运动框架出炉了,现在还是个初级版本,能满足需求.我们看看是如何实现的. 我们知道在Javascript 中 ‘.’等同于 ‘[]’ 例如: oDiv.style.h ...
随机推荐
- ansible-playbook模板化（jinja2）
1. ansible-playbook模板化(jinja2)条件与循环 1.1) jinja使用结构图 2. 编写jinja2的循环 2.1) 编写jinja2模板 1 [root@test-1 ...
- TTL电平,CMOS电平,232/485电平，OC门,OD门基础知识
1.RS232电平 或者说串口电平,有的甚至说计算机电平,所有的这些说法,指得都是计算机9针串口 (RS232)的电平,采用负逻辑, -15v ~ -3v 代表1 +3v ~ +15v 代表0 2. ...
- 第四届58topcoder编程大赛--地图路径规划
layout: post title: 第四届58topcoder编程大赛 subtitle: 58ACM catalog: true tags: - A* 算法 - C++ - 程序设计 问题及背景 ...
- pytest文档50-命令行参数--durations统计用例运行时间
前言 写完一个项目的自动化用例之后,发现有些用例运行较慢,影响整体的用例运行速度,于是领导说找出运行慢的那几个用例优化下. --durations 参数可以统计出每个用例运行的时间,对用例的时间做个排 ...
- Nginx禁止html等缓存
+++ date="2020-10-16" title="Nginx禁止html等缓存" tags=["nginx"] categories ...
- go 数组指针 指针数组
package main import "fmt" func test() { var p *int // 定义指针 var a = 10 p = &a // 将a的地址赋 ...
- drf (学习第二部)
目录 http球球处理 请求与响应 Response 常用属性 状态码 http请求处理 drf除了在数据序列化部分简写代码之外,还在视图中提供了简写操作.所以在Django原有的Django.vie ...
- soundPool声音池
soundPool可以同时播放多个声音,但是最好文件不要超过1M,声音只能播放几秒,适合游戏混合音效 public class MainActivity extends AppCompatActivi ...
- open_spiel 随笔
------------恢复内容开始------------ ------------恢复内容开始------------ 遇到的一些疑惑且已经解决的 1. SPIEL_CHECK_GT()诸如此类的 ...
- Swagger配置与使用
问题:前后端分离时代的到来 前端需要测试后端数据 后端提供接口,实时更新接口的改动 一.Swagger简介 号称世界上最流行的api框架 Restful api文档在线自动生成工具-->api文 ...