多物体运动框架案例一：多个Div的宽度运动变化
<!doctype html>
<html>
<head>
<title>运动</title>
<meta charset="utf-8">
<style>
html{font-family:楷体;}
div{width:100px;height:50px;background:red;margin:10px;}
</style>
<script>
window.onload=function()
{
var aDiv=document.getElementsByTagName('div');
for(var i=0;i<aDiv.length;i++)
{
aDiv[i].timer=null;
aDiv[i].onmouseover=function()
{
startMove(this,400);
}
aDiv[i].onmouseout=function()
{
startMove(this,100);
}
}
//var timer=null;
function startMove(obj,iTarget)
{
clearInterval(obj.timer);
obj.timer=setInterval(function(){
var speed=(iTarget-obj.offsetWidth)/6;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
if(obj.offsetWidth==iTarget)
{
clearInterval(obj.timer);
}
else
{
obj.style.width=obj.offsetWidth+speed+'px';
}
},30)
}
}
</script>
</head>
<body style='height:2000px;'> <div ></div>
<div></div>
<div></div>
</body>
</html>
for(var i=0;i<aDiv.length;i++)
{ aDiv[i].onmouseover=function()
{
aDiv[i].timer=null;
startMove(this,400);
}
aDiv[i].onmouseout=function()
{
startMove(this,100);
}
}
多物体运动框架案例一：多个Div的宽度运动变化的更多相关文章
- javascript链式运动框架案例
javascript链式运动框架 任务描述: 当鼠标移入红色矩形时,该矩形宽度逐渐增加至400px,之后高度逐渐增加至400px; 当鼠标移出红色矩形时,该矩形高度逐渐减小至200px,之后宽度逐渐减 ...
- 【repost】JavaScript完美运动框架的进阶之旅
运动框架的实现思路 运动,其实就是在一段时间内改变left.right.width.height.opactiy的值,到达目的地之后停止. 现在按照以下步骤来进行我们的运动框架的封装: 匀速运动. 缓 ...
- js运动框架逐渐递进版
运动,其实就是在一段时间内改变left.right.width.height.opactiy的值,到达目的地之后停止. 现在按照以下步骤来进行我们的运动框架的封装: 匀速运动. 缓冲运动. 多物体运动 ...
- JavaScript 基础入门11 - 运动框架的封装
目录 JavaScript 运动原理 运动基础 简单运动的封装 淡入淡出 不同属性的设置 多属性值同时运动 运动回调,链式运动 缓冲运动 加入缓冲的运动框架 案例1 多图片展开收缩 运动的留言本 Ja ...
- javascript运动框架
下面这个一个运动框架可以控制元素在一个属性上的运动,同时,可以调用回调函数. /* 获取元素某个属性的值 @obj: 对象 @attr: 属性值 */ function getStyle(obj, a ...
- Javascript之运动框架2
运动框架2与运动框架1的不同之处在于,运动框架2是框架1的升级版,首先完善了传入值,改为move(obj,json,options),在options里面,可以选择传入或者不传入时间,运动形式,以及函 ...
- day40—JavaScript多物体运动框架
转行学开发,代码100天——2018-04-25 今天继续学习JavaScript的运动实现——多物体运动框架的介绍及其应用. 首先来看一个简单的例子.如下图,要使图中3个红色盒子实现鼠标移入变宽,移 ...
- JavaScript的运动框架学习总结
一.目录 1. 入门案例——实现匀速运动 2. 入门案例——实现缓冲运动 3. 实现任意值的运动框架v.1 4. 改进任意值的运动框架v.2 5. 改进任意值的运动框架v.3 6. 实现链式运动框架 ...
- js运动框架之掉落的扑克牌（重心、弹起效果）
玩过电脑自带纸牌游戏的同志们应该都知道,游戏过关后扑克牌会依次从上空掉落,落下后又弹起,直至"滚出"屏幕. 效果如图: 这个案例的具体效果就是:点击开始运动,纸牌会从右上角掉 ...
随机推荐
- 集合:Iterator
why ? when ? how ? what ? 为什么需要集合呢? 在数据结构中链表.树.堆等一些操作都是由我们自己写的,这些操作是不是可以提取出来,以后要用就直接拿来用就好,这样非常方便. Ja ...
- 数据分布vs聚类-数据预处理技巧-对数变换
对于原始数据分布倾斜 利用统计或数学变换来减轻数据分布倾斜的影响.使原本密集的区间的值尽可能的分散, 原本分散的区间的值尽量的聚合. Log变换通常用来创建单调的数据变换.它的主要作用在于帮助稳定方差 ...
- L2-006. 树的遍历（不建树）
L2-006. 树的遍历 给定一棵二叉树的后序遍历和中序遍历,请你输出其层序遍历的序列.这里假设键值都是互不相等的正整数. 输入格式: 输入第一行给出一个正整数N(<=30),是二叉树中结点 ...
- Java基础学习总结（86）——Java异常处理机制Exception抛出异常时throw和throws用法详解
什么时运行时异常?什么是非运行时异常? 通俗的讲: 运行时异常:就是编译通过,运行时就崩了,比如数组越界. 非运行时异常:就是编译不通过,这时就得必须去处理了.不然就没法运行了. 全面的讲: Thro ...
- springboot项目--传入参数校验-----SpringBoot开发详解（五）--Controller接收参数以及参数校验----https://blog.csdn.net/qq_31001665/article/details/71075743
https://blog.csdn.net/qq_31001665/article/details/71075743 springboot项目--传入参数校验-----SpringBoot开发详解(五 ...
- [luoguP3146] [USACO16OPEN]248（区间DP）
传送门 f[i][j]表示区间 i-j 合并的最大值 转移: 若f[i][k] && f[k+1][j] && f[i][k] == f[k+1][j] --> ...
- CodeForces - 459C - Pashmak and Buses
先上题目+: C. Pashmak and Buses time limit per test 1 second memory limit per test 256 megabytes input s ...
- Java 学习（6）：java Number & Math & String & 数组...常用类型
目录 --- Number & Math类 --- Character 类 --- String 类 --- StringBuffer 类 --- 数组 Number & Math类: ...
- SCOI2010第一场
NOI2010全国青少年信息学奥林匹克竞赛 四川代表队选拔赛 第一场 题目名称 幸运数字 游戏 股票交易 英文代号 luckynumber game trade 时限 2秒 2秒 2秒 输入文件 lu ...
- RxJava系列之二 变换类操作符具体解释1
1.回想 上一篇文章我们主要介绍了RxJava , RxJava 的Observables和 RxJava的just操作符.以及RxJava一些经常使用的操作. 没看过的抓紧点我去看吧. 事实上RxJ ...