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,之后宽度逐渐减 ...
随机推荐
- FPGA基础学习(6) -- 原语
目录 1. IBUF和IBUFDS(IO) 2. IDDR(Input/Output Functions) 3. IBUFG和IBUFGDS(IO) 原语,即primitive.不同的厂商,原语不同: ...
- nginx windows 安装为服务.
安装Nginx 下载windows版nginx (http://nginx.org/download/nginx-1.10.0.zip),之后解压到需要放置的位置(D:\xampp\nginx) 将N ...
- my34_脚本冥等添加自动任务-mysql监控部署
场景: 定义一套添加mysql监控的脚本,在mysql安装完毕后,一键执行添加监控 已有以下的等一系列命令可以读取mysql从库的延迟时间并推向influxdb,变化的部分为 -P 端口.-k k ...
- 如何获取用户的地理位置？ && html5 地理位置
推荐网站 https://html5demos.com/geo/ 我们有时候可能希望首先获得用户的地理位置,然后根据不同的地理位置(更具针对性地)推送不同的信息等等. 下面这段代码就可以在你有jQue ...
- Rational Rose2007下载和安装
网上关于Rational Rose2007安装包,网上找了一堆大多都是垃圾,最后找到一个可用的(带激活文件),保存在自己的网盘里,这里分享出来:https://pan.baidu.com/s/1bpb ...
- 浅谈flex布局
Flex布局,俗称弹性布局,有了这个布局,咱们做的事情很多,以前那些很难实现比如说垂直居中之类都不存在了. 盒模型布局依赖于float,display,定位之类的方式来布局,这种的布局对一些特殊布局来 ...
- 如何在Eclipse/Myeclipse/Scala IDEA for Eclipse 中正确删除已经下载过的插件（图文详解）
不多说,直接上干货! 见 Eclipse/Myeclipse/Scala IDEA for Eclipse里两种添加插件的方法(在线和离线) 第一步 :在菜单栏中,找到help-------insta ...
- SeaJS结合javascript面向对象使用笔记（一）
Sea.JS Seajs结合javascript面向对象 所需页面 /app/index.html /lib/factory.js /lib/sea.js /lib/constructor.js /j ...
- unity2018使用tileMap生成地图 类似泰拉瑞亚创建和销毁地图块
参考网站:https://blog.csdn.net/pz789as/article/details/79540890 using System.Collections; using System.C ...
- CVE-2017-6920 Drupal远程代码执行漏洞学习
1.背景介绍: CVE-2017-6920是Drupal Core的YAML解析器处理不当所导致的一个远程代码执行漏洞,影响8.x的Drupal Core. Drupal介绍:Drupal 是一个由 ...