多物体运动框架案例一：多个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运动框架之掉落的扑克牌（重心、弹起效果）
玩过电脑自带纸牌游戏的同志们应该都知道,游戏过关后扑克牌会依次从上空掉落,落下后又弹起,直至"滚出"屏幕. 效果如图: 这个案例的具体效果就是:点击开始运动,纸牌会从右上角掉 ...
随机推荐
- python lambda简易使用
基本格式 lambda 变量名:函数表达式 ①直接使用 f=lambda x:x**2 f(3) ②设置函数列表 l=[lambda x:x**2, lambda x:x**3, lambda x:x ...
- Scoop - 在Windows命令行上进行程序安装
2019-01-28 22:49:21 资料来源自Scoop官方网站以及github上的帮助文档 如果有疑惑或者觉得文章有错误请留言以帮助改正 补充内容(2019-04-09 21:11:36):不 ...
- swing中的按钮事件
package pack2; import java.awt.event.ActionEvent; import java.awt.event.ActionListener; import javax ...
- Jmeter BeanShell PreProcessor使用笔记
打印log log.info("content:" + content); 将字符串转化为JsonString import com.alibaba.fastjson.JSON; ...
- centos7在grub界面下更改root密码
想要更改root的密码或者忘记了root的密码的时候可以在grub界面下更改root的密码. 百度了很多内容,更多方法都是适用于centos6及以前版本的,终于找到一个可以的. 1.开机后,在下图界面 ...
- springboot 生产环境不能访问swagger
@Profile({"local", "dev", "test"}) local,dev, test 分支都可以访问swagger
- 《Spring Boot 那些事》
<Spring Boot 那些事>----https://www.bysocket.com/?p=1124
- [luoguP1922] 女仆咖啡厅桌游吧（奇奇怪怪的树形DP）
传送门 什么鬼的题? 代码 #include <cstdio> #include <cstring> #include <iostream> #define N 1 ...
- 从一行代码开始，浅谈python字符串格式化
今天看到了一行这样的代码: boundary = '%.32x' % random.randint(0, 256**16) 我知道这是一个生成格式化字符串的语句,它将随机生成的一个32位16进制数,将 ...
- 总结懒加载的解决方法(全)org.hibernate.LazyInitializationException: could not initialize proxy - no Session
如下错误:org.hibernate.LazyInitializationException: could not initialize proxy - no Session 原因是懒加载的问题,因为 ...