javascript链式运动框架案例
javascript链式运动框架
任务描述：
当鼠标移入红色矩形时，该矩形宽度逐渐增加至400px，之后高度逐渐增加至400px;
当鼠标移出红色矩形时，该矩形高度逐渐减小至200px，之后宽度逐渐减小至200px。
效果图：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>JS小案例：多物体变宽</title>
<style>
body {
height: 2000px;
margin: 0px;
} div {
width: 200px;
height: 200px;
background: red;
margin: 10px;
}
</style>
<script>
window.onload = function () { //补充代码
}
</script>
</head> <body>
<div id='div1'></div>
</body> </html>
参考代码：
oDiv1 = document.getElementById('div1');
oDiv1.onmouseover = function () {
startMove(oDiv1, 'width', 400, function () {
startMove(oDiv1, 'height', 400)
});
}
oDiv1.onmouseout = function () {
startMove(oDiv1, 'height', 200, function () {
startMove(oDiv1, 'width', 200)
});
}
function getStyle(obj, name) {
if (obj.currentStyle) {
return obj.currentStyle[name];
}
else {
return getComputedStyle(obj, null)[name];
}
}
function startMove(obj, attr, iTarget, fnEnd) {
clearInterval(obj.timer);
obj.timer = setInterval(function () {
var cur = 0;
if (attr == 'opacity') {
//Math.round()四舍五入取整主要是针对低浮点数的精度问题。
cur = Math.round(parseFloat(getStyle(obj, attr)) * 100);
} else {
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);
if (fnEnd) {
fnEnd();
}
} else {
if (attr == 'opacity') {
obj.style.opacity = (cur + speed) / 100;
obj.style.filter = 'alpha(opacity=' + (cur + speed) + ")";
}
else {
obj.style[attr] = cur + speed + 'px';
}
}
}, 30)
}
javascript链式运动框架案例的更多相关文章
- Javascript 链式运动框架——逐行分析代码，让你轻松了解运动的原理
所谓链式运动,就是一环扣一环.我们的很多运动实际上来说指的就是分阶段的,第一个阶段动完,下个阶段开始动. 这个链式运动框架就是用来处理这些问题的. 我们先来看下之前的运动框架,以下是Javascrip ...
- Javascript之链式运动框架1
第一部分:HTML内容: <script src="6-1.js"></script> <script> window.onload=funct ...
- （43）JS运动之链式运动框架
链式运动框架就是一系列的运动分阶段进行,在普通的运动框架上加上一个參数function,这个function表示下一个要运行的动作.详细代码例如以下: <!DOCTYPE HTML> &l ...
- javascript学习-原生javascript的小特效（原生javascript实现链式运动）
以下代码就不详细解析了,在我之前的多个运动效果中已经解析好多次了,重复的地方这里就不说明了,有兴趣的童鞋可以去看看之前的文章<原生javascript的小特效> <!DOCTYPE ...
- 原生JavaScript运动功能系列（四）：多物体多值链式运动
原生JavaScript运动功能系列(一):运动功能剖析与匀速运动实现 原生JavaScript运动功能系列(二):缓冲运动 原生JavaScript运动功能系列(三):多物体多值运动 多物体多值链式 ...
- HTML+JavaScript实现链式运动特效
在学习js的过程中,发现这家伙做特效真是不错,尽管说眼下水平还不够,只是也能写点简单的效果. 今天分享一个简单的运动框架.然后利用这个框架实现简单的链式运动特效. 1.move.js 在运动框架中.主 ...
- JavaScript运动_封装模板(支持链式运动、完美运动)
最近自学到了JS运动部分,自己整理了一些js模板,望采纳. 1.支持链式运动的模板: 先解释一下函数中的几个参数含义: 1)obj: 要操作的对象 2)target: 属性要到达的目标值 3)attr ...
- Javascript 链式作用域 function fn(){}和var fn=function(){}区别
其实对于Javascript链式作用域的描述,包括,JS权威指南,都有些太冗长了--但是很准确:JavaScript中的函数运行在他们被定义的作用域里,而不是他们被执行的作用域里. 这句话有点难懂,但 ...
- js动画--链式运动
前面几节我们只是讲述了一种运动,这节课我将讲述链式运动:就以一个动作接着一个动作完成. 对于这个实现,我们只需要改变一下就可以实现了,设置一个回调函数. var timer; window.onloa ...
随机推荐
- protoc-c 安装记录
记录下 protobuf-c 安装过程中的问题. 1) 安装的时候没细看依赖. -- protobuf-c requires a C compiler, a C++ compiler, protob ...
- [转载]volitale关键字详解
来看这个代码: int fun(int& a) { int b = a; int c = a; return a+b+c; } int main() { int a=1; //........ ...
- Linux下clock子系统
常用API: 1.struct clk *clk_get(struct device *dev, const char *id):从一个时钟list链表中以dev或者字符id名称查找一个时钟clk结构 ...
- 2014年 实验五 Internet与网络工具的使用
实验五 Internet与网络工具的使用 [实验目的] ⑴.FTP服务器的架设和客户端的使用. ⑵.使用云盘和云笔记应用 ⑶.运用QQ的远程协助功能. (4).默认安装foxmail软件,进行邮件 ...
- 多测师讲解requests __介绍_高级讲师肖sir
我们今天讲解的内容 一.什么是Requests? Requests是用Python语言编写的简单易用的HTTP库,用来做接口测试的库. 二.安装requests库 1.按住Windows标志+r,在运 ...
- 面经手册 · 第13篇《除了JDK、CGLIB，还有3种类代理方式？面试又卡住！》
作者:小傅哥 博客:https://bugstack.cn 沉淀.分享.成长,让自己和他人都能有所收获! 一.前言 编程学习,先铺宽度还是挖深度? 其实技术宽度与技术深度是相辅相成的,你能了解多少技术 ...
- 【转】Linux-CentOS7设置程序开启自启步骤！
链接:https://blog.csdn.net/wang123459/article/details/79063703
- spring-security-结合JWT的简单demo
spring-security-demo 前言:本来是想尽量简单简单点的写一个demo的,但是spring-security实在是内容有点多,写着写着看起来就没那么简单了,想入门spring-secu ...
- xuexi0.2
1.数据结构就是研究数据如何排布和如何加工. 2.数组的目的是为了管理程序中类型相同,意义相关的变量. 3.数组的优势是比较简单,可以通过访问下标来进行随机访问.数组的限制:元素类型必须相同,数组的大 ...
- 帮你解读什么是Redis缓存穿透和缓存雪崩（包含解决方案）
一.缓存处理流程 前台请求,后台先从缓存中取数据,取到直接返回结果,取不到时从数据库中取,数据库取到更新缓存,并返回结果,数据库也没取到,那直接返回空结果. 二.缓存穿透 描述: 缓存穿透是指缓存和数 ...