多物体运动框架案例一：多个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运动框架之掉落的扑克牌（重心、弹起效果）
玩过电脑自带纸牌游戏的同志们应该都知道,游戏过关后扑克牌会依次从上空掉落,落下后又弹起,直至"滚出"屏幕. 效果如图: 这个案例的具体效果就是:点击开始运动,纸牌会从右上角掉 ...
随机推荐
- CentOS \Linux 6版本系统命令及其使用详解
概述 常用的linux命令,分为文件管理.磁盘管理.用户管理.软件管理.系统管理等. 文件管理 ls命令 使用权限:所有使用者 使用方式:ls [-alrtAFR] [name...] 说明:显示指定 ...
- python3.x Day2 购物车程序练习
购物车程序: 1.启动程序后,输入用户名密码后,如果是第一次登录,让用户输入工资,然后打印商品列表 2.允许用户根据商品编号购买商品 3.用户选择商品后,检测余额是否够,够就直接扣款,不够就提醒 4. ...
- linux tload-显示系统负载状况
推荐:更多linux 性能监测与优化 关注:linux命令大全 tload命令以图形化的方式输出当前系统的平均负载到指定的终端.假设不给予终端机编号,则会在执行tload指令的终端机显示负载情形. 语 ...
- MAC上postman离线安装时提示加载扩展程序出错怎么办？
目前的postman插件如果想正常使用,必须安装Postman Interceptor插件,这样才能直接使用chrome浏览器的cookie等信息,否则postman是无法完成老版本的功能的.post ...
- 微信小程序中如何实现分页下拉加载？（附源码）
转眼间坚持写教你微信小程序系列已经有十节系列课程了,每天的工作压力繁重,小女子也不知道自己还能坚持这样的系列教程多久.只希望每篇教程真的对大家有帮助.这节课我们要介绍的就是如何实现分页的下拉加载,我们 ...
- 56-混沌操作法之我见：二、AO、AC指标.(2015.2.9)
混沌操作法之我见:二.AO.AC指标 先看看其算法: Y=(H+L)/2: AO=MA(Y,5)-MA(Y,34): AC=AO-MA(AO,5). 由算法可以看出,AO表示的是近5期的综合价格与近3 ...
- HDU 1542 Atlantics 线段树+离散化扫描
将 x 轴上的点进行离散化,扫描线沿着 y 轴向上扫描 每次添加一条边不断找到当前状态有效边的长度 , 根据这个长度和下一条边形成的高度差得到一块合法的矩形的面积 #include<iostre ...
- CodeForces 220B(B. Little Elephant and Array)
http://codeforces.com/contest/220/problem/B 题意:给出一个数组,给出m组询问,问区间中出现a[i] 次的有多少个. sl: 很显然的离线问题了. 大视野菜花 ...
- chrome源代码目录结构简介（版本4.1.249.1059）
为了对庞大的源码项目进行分析,先对源码目录树作一个简单的介绍,粗略的了解一下各个模块的功能分布情况,chrome源代码src目录下的结构如下图: app:该目录下的代码主要是和各个操作系统平台相关的应 ...
- Javaweb中文乱码问题
request.setCharacterEncoding("utf-8");必须写在获得参数之前,即request.getParameter();之前