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 ...
随机推荐
- centos8平台使用pidstat监控cpu/内存/io
一,安装pidstat: 1,安装 [root@localhost yum.repos.d]# yum install sysstat 2,查看版本: [root@localhost ~]# pids ...
- python并发编程之多进程(实践篇) 转
一 multiprocessing模块介绍 python中的多线程无法利用多核优势,如果想要充分地使用多核CPU的资源,在python中大部分情况需要使用多进程.Python提供了multiproce ...
- Centos定时备份 MySQL数据库
一.编写数据库备份脚本 backupmysql.sh #!/bin/bash # Name:bakmysql.sh # This is a ShellScript For Auto DB Backup ...
- Groovy中如何向已有的类添加新方法
Groovy 中有多种途径实现向原有类添加方法,具体有如下几种: MOP(meta object protocol) -- 详见 ExpandoMetaClass 扩展方法 -- GDK采用的此方法 ...
- ZooKeeper的数据模型
ZooKeeper的数据模型 ZooKeeper提供的命名空间与标准的文件系统的命名空间非常类似:名称是由斜杠(/)分隔的一系列路径元素:ZooKeeper命名空间中的每个节点都由路径标识,如下图: ...
- linux中root目录下下指定磁盘空间扩容
1 查看当前磁盘情况 fdisk -l /dev/sda1 2048 6143 2048 83 Linux /dev/sda2 * 6144 1054719 524288 83 Linux /dev/ ...
- chrome浏览器中调试窗口位置修改
在这里修改就好了
- mysql 必会基础1
1.cmd --> 开启服务:net start mysql 关闭服务:net stop mysql 没有restart命令;命令格式:net stop serviceName;后面不需要加分号 ...
- 线程池FixedThreadPool
可重用线程池,只有核心线程,并发无阻塞, public class MainActivity extends AppCompatActivity { @Override protected void ...
- 微信小程序picker组件两列关联使用方式
在使用微信小程序picker组件时候,可以设置属性 mode = multiSelector 意为多列选择,关联选择,当第一列发生改变时侯,第二列甚至第三列发生相应的改变.但是官方文档上给的只 ...