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 ...
随机推荐
- tslib-1.4移植(转)
转自:http://blog.163.com/zhuandi_h/blog/static/180270288201222310291262/ 环境:host:Ubuntu11.10target:Oma ...
- Python的逻辑控制true/false和循环
逻辑判断 简单的几个尝试,看下和java的一点不同之处 1 > 2 # False 1 < 2 <3 # True 42 != '42' # True 'Name' == 'name ...
- element中过滤器filters的使用(开发小记)
之前在开发过程中遇到这么一个问题,一串数据需要在el-table中展示,其中含有金额字段,需要将其转换成标准数据格式,即三位一个逗号间隔. 今年刚毕业就上手项目了,第一次接触的Vue,开发经验少,也忘 ...
- 使用leveldb
C++引入leveldb 编译安装: git clone --recurse-submodules https://github.com/google/leveldb.git cd leveldb m ...
- 利用github创建个人网站
先建个仓库,仓库名为: 用户名.github.io 进入仓库,删除README.md文件 新建个文件,文件名为: index.html,内容根据自己要求编写 打开网站,地址:https://用户名.g ...
- Windows Server 设置自动登陆
前言 Windows Server 相信很多人都在使用,但是系统每次登陆都比较麻烦,能否设置自动登陆呢?有兴趣一起来学习一下吧!的自动登陆方法也比较多,在此分享一个实用简单的,通过命令来设置" ...
- spring boot: 从配置文件中读取数据的常用方法(spring boot 2.3.4)
一,从配置文件中读取数据有哪些方法? 通常有3种用法: 1,直接使用value注解引用得到配置项的值 2, 封装到Component类中再调用 3, 用Environment类从代码中直接访问 生 ...
- centos8平台redis5日志按天分割
一,创建日志的备份目录 [root@yjweb crontab]# mkdir /data/logs/redislogsbackup 说明:刘宏缔的架构森林是一个专注架构的博客,地址:https:// ...
- Tomcat6.0 支持 https
环境信息 Linux系统 + Tomcat (程序页面可以运行前提下) 条件:安装了JDK 查看指定版本信息 1 进入$JAVA_HOME/bin目录 (一般是这个目录 /usr/java ...
- Linux命令行bash的快捷键
提升效率 锁屏 Ctrl + s 敲什么命令没反应,但是敲上去了,屏幕上不做任何反应 Ctrl + q 再解锁 例如: 先Ctrl + s 锁屏 然后在命令行敲入 [root@C8-1 ~]# rm ...