多物体运动框架案例一：多个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运动框架之掉落的扑克牌（重心、弹起效果）
玩过电脑自带纸牌游戏的同志们应该都知道,游戏过关后扑克牌会依次从上空掉落,落下后又弹起,直至"滚出"屏幕. 效果如图: 这个案例的具体效果就是:点击开始运动,纸牌会从右上角掉 ...
随机推荐
- centos7进入救援模式，修复错误配置
因某些修改操作,导致系统重启后无法正常启动,此时可进入救援模式,修复错误配置即可. OS:centos 7 1.重启系统后,进入grup引导页面,选中第一项然后按“e” 进入编辑模式: 2.通过↓键找 ...
- linux环境下时间的查看和修改
查看日期和时间date 查看时区date -R 查看UTC时间date -u 修改日期[root@centos ~]# date -s 20181230Sun Dec 30 00:00:00 EST ...
- PYGAME学习笔记_01
01_使用PYGAME创建图形窗口 1.1_游戏的初始化和退出 pygame.init() 写入并初始化所有PYGAME模块,使用其他模块之前,必须先调用init方法 pygame.quit() 卸载 ...
- Django-前后台的数据交互
Django 从后台往前台传递数据时有多种方法可以实现. 最简单的后台是这样的: from django.shortcuts import render def main_page(request): ...
- 不动点（Fixed Point）
本系列文章由 @yhl_leo 出品,转载请注明出处. 文章链接: http://blog.csdn.net/yhl_leo/article/details/51735818 在数学中,函数的不动点( ...
- Codeforces Round #254 (Div. 1) C DZY Loves Colors
http://codeforces.com/contest/444/problem/C 题意:给出一个数组,初始时每个值从1--n分别是1--n. 然后两种操作. 1:操作 a.b内的数字是a,b内 ...
- 质因数分解 2012年NOIP全国联赛普及组
时间限制: 1 s 空间限制: 128000 KB 题目等级 : 青铜 Bronze 题目描述 Description 已知正整数 n是两个不同的质数的乘积,试求出较大的那个质数 . 输入描述 Inp ...
- Eddy's mistakes
Problem Description Eddy usually writes articles ,but he likes mixing the English letter uses, for ...
- 4、Java并发性和多线程-并发编程模型
以下内容转自http://ifeve.com/%E5%B9%B6%E5%8F%91%E7%BC%96%E7%A8%8B%E6%A8%A1%E5%9E%8B/: 并发系统可以采用多种并发编程模型来实现. ...
- heap实现
//STL提供的是Max heap,使用vector作为底部容器 //push_heap算法:首先将元素放到堆所对应的数组的末端,然后从该节点开始向上调整, //若当前结点键值比父结点大,则兑换位置, ...