Javascript 多物体运动1
多物体运动
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
width: 50px;
height: 30px;
background: #444444;
margin-top: 5px;
}
</style>
<script>
window.onload = function(){
var obj = document.getElementsByTagName('div');
for(var i=0;i<obj.length;i++){
obj[i].onmouseover = function{
startmove(this,500);
};
obj[i].onmouseout = function(){
startmove(this,50);
};
}
};
var timer = null;
function startmove(obj,target){
var speed = (target-obj.offsetWidth)/6;
speed = speed>0?Math.ceil(speed):Math.floor(speed);
clearInterval(timer);
timer = setInterval(function(){
if(obj.offsetWidth == target){
clearInterval(timer);
}else{
obj.style.width = obj.offsetWidth + speed +'px';
}
},30);
}
</script>
</head>
<body>
<div></div>
<div></div>
<div></div>
</body>
</html>
Javascript 多物体运动1的更多相关文章
- javascript多物体运动案例:多物体淡入淡出
javascript多物体运动案例:多物体淡入淡出 任务描述: 补充代码,当鼠标移入红色区域时,该区域透明度逐渐增加至不透明;当鼠标移出该红色区域时,该区域透明度逐渐恢复至初始程度. 效果图: < ...
- Javascript 多物体运动——逐行分析代码,让你轻松了解运动的原理
我们先来看下之前的运动的代码,是否支持多物体运动,会出现怎么样的问题. <style type="text/css"> div { width: 100px; heig ...
- day40—JavaScript多物体运动框架
转行学开发,代码100天——2018-04-25 今天继续学习JavaScript的运动实现——多物体运动框架的介绍及其应用. 首先来看一个简单的例子.如下图,要使图中3个红色盒子实现鼠标移入变宽,移 ...
- javascript每日一练(十一)——多物体运动
一.多物体运动 需要注意:每个运动物体的定时器作为物体的属性独立出来互不影响,属性与运动对象绑定,不能公用: 例子1: <!doctype html> <html> <h ...
- JavaScript 运动(缓冲运动,多物体运动 ,多物体多值运动+回调机制)
匀速运动 (当需要物体做匀速运动直接调用statMove函数) function startMove(dom,targetPosetion){ //dom : 运动对象,targetPositio ...
- js动画之多物体运动
多个物体这不能使用一个定时器了,要给每个物体一个定时器 <!DOCTYPE html> <html lang="en"> <head> < ...
- Javascript 链式运动框架——逐行分析代码,让你轻松了解运动的原理
所谓链式运动,就是一环扣一环.我们的很多运动实际上来说指的就是分阶段的,第一个阶段动完,下个阶段开始动. 这个链式运动框架就是用来处理这些问题的. 我们先来看下之前的运动框架,以下是Javascrip ...
- js动画---多物体运动
对于多物体运动和单个物体运动来说,没有特别大的区别,实现原理基本上是一样的,都是通过定时器来实现的,但是多物体有一些地方需要注意,具体哪些需要注意,我将在下面的程序中说明. 首先,我们需要建立几个li ...
- javascript链式运动框架案例
javascript链式运动框架 任务描述: 当鼠标移入红色矩形时,该矩形宽度逐渐增加至400px,之后高度逐渐增加至400px; 当鼠标移出红色矩形时,该矩形高度逐渐减小至200px,之后宽度逐渐减 ...
随机推荐
- 2016级算法第二次上机-D.Bamboo的饼干
Bamboo的饼干 分析 从两个数组中各取一个数,使两者相加等于给定值.要注意去重和排序 难度不大,方法很多,基本只要不大于O(n^2 ) 的都可以过.本意想考察二分搜索 还可以借助stl中的map, ...
- 集合之四:List接口
查阅API,看List的介绍.有序的 collection(也称为序列).此接口的用户可以对列表中每个元素的插入位置进行精确地控制.用户可以根据元素的整数索引(在列表中的位置)访问元素,并搜索列表中的 ...
- mocha测试框架
中文翻译文档:https://www.jianshu.com/p/9c78548caffa 阮一峰:http://www.ruanyifeng.com/blog/2015/12/a-mocha-tut ...
- API Monitor程序分析工具简介
API Monitor是一个免费软件,可以让你监视和控制应用程序和服务,取得该应用程序的API调用情况. 它是一个强大的工具,看到的应用程序和服务是如何工作的,或跟踪,你在自己的应用程序的问题. AP ...
- c#中的引用类型和值类型
一,c#中的值类型和引用类型 众所周知在c#中有两种基本类型,它们分别是值类型和引用类型:而每种类型都可以细分为如下类型: 什么是值类型和引用类型 什么是值类型: 进一步研究文档,你会发现所有的结构都 ...
- 通过shell处理多行数据
### 源文件 cat > tmpb <<'EOF' dbname:db_a,start_time::: query_end_time:::,query_total_time:,da ...
- POJ 2253 Frogger ,poj3660Cow Contest(判断绝对顺序)(最短路,floyed)
POJ 2253 Frogger题目意思就是求所有路径中最大路径中的最小值. #include<iostream> #include<cstdio> #include<s ...
- D3.js绘制平行坐标图
参照:https://syntagmatic.github.io/parallel-coordinates/ 和 https://github.com/syntagmatic/parallel-coo ...
- python调用另一个.py文件中的类和函数
同一文件夹下的调用 1.调用函数 A.py文件如下:def add(x,y): print('和为:%d'%(x+y)) 在B.py文件中调用A.py的add函数如下: import AA.ad ...
- orcale 之 多表查询
在以往的工作中我们不可能单一的从一张表中查询数据,而在开始设计数据库的时候,我们会把一些数据存放在不同的数据表中,因此往往需要从多个数据表中获取到我们想要的数据. 笛卡儿积 在学习这些之前我们先了解一 ...