多物体运动框架案例一：多个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运动框架之掉落的扑克牌（重心、弹起效果）
玩过电脑自带纸牌游戏的同志们应该都知道,游戏过关后扑克牌会依次从上空掉落,落下后又弹起,直至"滚出"屏幕. 效果如图: 这个案例的具体效果就是:点击开始运动,纸牌会从右上角掉 ...
随机推荐
- 输入框点击下滑Ztree菜单
记录一个功能实现代码,我这边前端用的是layui,需要实现的效果如下: 需求:当点击选择地区的时候会出现如上图的下拉菜单. 分析:首先肯定给这个输入框加监听,click方法,然后将ztree的div显 ...
- oop设计模式抽象总结
创建型模式: 一.简单工厂,工厂方法,抽象工厂 简单工厂:只有一层抽象,由工厂去获得抽象类的具体对象,工厂内的方法可以看做静态方法 工厂方法:有两个抽象,工厂的抽象和具体类的抽象. 举个例子: 有个汽 ...
- 常用的HTTP测试工具谷歌浏览器插件汇总
网页的开发和测试时最常见的测试就是HTTP测试,作为曾经的测试人员在这方面还是略知一二的.其实做网页测试工作是非常繁琐的时期,有时候甚至是无聊重复的,如果没有网页测试工具的帮助的话,测试人员会越做越怀 ...
- spring与quartz整合实现分布式动态创建，删除，改变执行时间定时任务(mysql数据库)
背景:因为在项目中用到了定时任务,当时想到了spring的quartz,写完发现费了很大功夫,光是整合就花了一上午,其中最大的问题就是版本问题,项目中用的是spring3.2.8的版本,查阅发现,3. ...
- Apache Maven Cookbook（八）学习笔记-Handling Typical Build Requirements
Including and excluding additional resources Using the Maven Help Plugin: mvn help:effective-pom mvn ...
- 团队开发git使用各种问题
参考:https://www.cnblogs.com/schaepher/p/4933873.html 问题-3:保持github上项目干净,对于在不同机器上运行会不同的文件不予维护(如.idea/w ...
- Mysql SQL查询今天、昨天、n天内、第n天------https://blog.csdn.net/baidu_27222643/article/details/60467585
Mysql SQL查询今天.昨天.n天内.第n天 https://blog.csdn.net/baidu_27222643/article/details/60467585
- vue项目使用static目录存放图片解决方案
我个人喜欢把所有引用文件全部放在打包文件src的同级文件static文件内部,方便整合. 提醒:vue项目中正常情况下图片是由 url-loader 处理,加入了hash值,如果放到static里面w ...
- 演练：使用VS2010 C# 创作简单的多线程组件
BackgroundWorker 组件取代了 System.Threading 命名空间并添加了功能:但是,可以选择保留 System.Threading 命名空间以实现向后兼容并供将来使用.有关更多 ...
- SSD性能优化记录
在上一篇博文中,我设计了一个优化方法,方法从业务角度出发,将切图操作涉及到的性能路径剖析出来,分别进行优化,效果显著. 眼下的情况是:一张ArcGIS武汉市城市影像图.该操作由79小时缩短至当前的67 ...