多物体运动框架：

1.多个盒子同时运动：move（obj，target）多一个参数

<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
div{
width: 100px;
height: 50px;
background-color: red;
margin: 10px;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<script type="text/javascript">
window.onload=function(){
var aDiv=document.getElementsByTagName('div');

for (var i = 0; i < aDiv.length; i++) {
aDiv[i].timer=null;
aDiv[i].onmouseover=function(){
move(this,400);
}
aDiv[i].onmouseout=function(){
move(this,100);
}
}
}
//var timer=null;
function move(obj,target){
clearInterval(obj.timer);
obj.timer=setInterval(function(){
var speed =(target-obj.offsetWidth)/6;
speed=speed>0?Math.ceil(speed):Math.floor(speed);

if(obj.offsetWidth==target)
{
clearInterval(obj.timer);
}
else
{
obj.style.width=obj.offsetWidth+speed+'px';
}
},30)
}
</script>
</body>
</html>

2.多个盒子淡入淡出

<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
div{
width: 200px;
height: 200px;
margin: 20px;
background-color: red;
float: left;
filter: alpha(opacity:30);
opacity: 0.3;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<script type="text/javascript">
window.onload=function(){
var aDiv=document.getElementsByTagName('div');
for (var i = 0; i < aDiv.length; i++) {
aDiv[i].timer=null;
aDiv[i].alpha=30;
aDiv[i].onmouseover=function(){
move(this,100);
};
aDiv[i].onmouseout=function(){
move(this,30);
};
}
}
// var alpha=30; //有问题，不能共用 一边移出时，变小 一边移入，变大   解决方法：作为属性加到物体身上
function move(obj,target){
clearInterval(obj.timer);
obj.timer=setInterval(function(){
var speed=(target-obj.alpha)/6;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
if (obj.alpha==target)
{
clearInterval(obj.timer);
}
else{
obj.alpha+=speed;

obj.style.filter='alpha(opacity:'+obj.alpha+')';
obj.style.opacity=obj.alpha/100;
}
},30);
}
</script>
</body>
</html>

多开几个定时器，任何东西都不能共用（如alpha）。

任意值运动框架：move（obj，attr，target）

1.通过一套框架对盒子设置不同的变化

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
height: 200px;
width: 200px;
background-color: yellow;
float: left;
margin: 20px;
border: 5px solid black;
filter: alpha(opacity:30);
opacity: 0.3;
}
</style>
</head>
<body>
<div id="div1">变不透明</div>
<div id="div2">变长</div>
<script type="text/javascript">
window.onload=function(){
var oDiv1=document.getElementById('div1');
var oDiv2=document.getElementById('div2');
oDiv1.onmouseover=function(){
move(this,'opacity',100);
}
oDiv1.onmouseout=function(){
move(this,'opacity',30);
}
oDiv2.onmouseover=function(){
move(this,'height',500);
}
oDiv2.onmouseout=function(){
move(this,'height',200);
}
}
function getStyle(obj,name){ //获取不在行间的样式
if (obj.currentStyle) {
return obj.currentStyle[name];
}
else{
return getComputedStyle(obj,false)[name];
}
}
function move(obj,arrt,target){
clearInterval(obj.timer);
obj.timer=setInterval(function(){
//var cur=parseInt(getStyle(obj,arrt)); //parseInt 转换为整数 直接将opacity转换为0
var cur=0;
if(arrt=='opacity'){
cur=Math.round(parseFloat(getStyle(obj,arrt))*100); //针对透明度
}
else{
cur=parseInt(getStyle(obj,arrt));
}
var speed=(target-cur)/6;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
if (cur==target)
{
clearInterval(obj.timer);
}
else{
if(arrt=='opacity')
{
obj.style.filter='alpha(opacity:'+(cur+speed)+')';
obj.style.opacity=(cur+speed)/100;
}
else
{
obj.style[arrt]=cur+speed+'px'; //透明度 不能+px
}

}
},30)
}
</script>
</body>
</html>

由于透明度在原框架中会有bug，因此对于透明度要另做判断。

eg：仿flash动画

github地址：https://github.com/hhhxy/jsFlash

链式运动：move（obj，attr，target，fn） 加一个函数参数

function getStyle(obj,name){
if (obj.currentStyle) {
return obj.currentStyle[name];
}
else{
return getComputedStyle(obj,false)[name];
}
}
// var timer=null;
function move(obj,arrt,target,fnEnd){
clearInterval(obj.timer);
obj.timer=setInterval(function(){
//var cur=parseInt(getStyle(obj,arrt)); //parseInt 转换为整数 直接将opacity转换为0
var cur=0;
if(arrt=='opacity'){
cur=Math.round(parseFloat(getStyle(obj,arrt))*100); //针对透明度
}
else{
cur=parseInt(getStyle(obj,arrt));
}
var speed=(target-cur)/6;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
if (cur==target)
{
clearInterval(obj.timer);

if(fnEnd) fnEnd();
}
else{
if(arrt=='opacity')
{
obj.style.filter='alpha(opacity:'+(cur+speed)+')';
obj.style.opacity=(cur+speed)/100;
}
else
{
obj.style[arrt]=cur+speed+'px'; //透明度 不能+px
}
}
},30)
}

应用：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>运动框架</title>
<style type="text/css">
#div1{
width: 100px;
height: 100px;
background-color: red;
filter: alpha(opacity:30);
opacity: 0.3;
}
</style>
</head>
<body>
<div id="div1"></div>
<script src="move1.js"></script>
<script type="text/javascript">
window.onload=function(){
var oDiv=document.getElementById('div1');
oDiv.onmouseover=function(){
move(oDiv,'width',300,function()
{
move(oDiv,'height',300,function(){
move(oDiv,'opacity',100)
});
});
};
oDiv.onmouseout=function(){
move(oDiv,'opacity',30,function(){
move(oDiv,'height',100,function(){
move(oDiv,'width',100);
});
});
};
}
</script>
</body>
</html>

完美运动框架：

透明度，大小一起走 传json    move（obj，json，fn）

function getStyle(obj,name){
if (obj.currentStyle) {
return obj.currentStyle[name];
}
else{
return getComputedStyle(obj,false)[name];
}
}
// var timer=null;
function move(obj,json,fnEnd){
clearInterval(obj.timer);
obj.timer=setInterval(function(){
//var cur=parseInt(getStyle(obj,arrt)); //parseInt 转换为整数 直接将opacity转换为0
var bStop=true; //假设所有的值都已经

for(arrt in json) //做一个循环,每次循环取决于json中的数据
{
var cur=0;
if(arrt=='opacity'){
cur=Math.round(parseFloat(getStyle(obj,arrt))*100); //针对透明度
}
else{
cur=parseInt(getStyle(obj,arrt));
}
var speed=(json[arrt]-cur)/6;
speed=speed>0?Math.ceil(speed):Math.floor(speed);

if(cur!=json[arrt])
bStop=false;

if(arrt=='opacity')
{
obj.style.filter='alpha(opacity:'+(cur+speed)+')';
obj.style.opacity=(cur+speed)/100;
}
else
{
obj.style[arrt]=cur+speed+'px'; //透明度 不能+px
}
}
if(bStop==true)
{
clearInterval(obj.timer);
if(fnEnd) fnEnd();
}
},30)
}

应用

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>完美运动</title>
<style type="text/css">
#div1{
width: 100px;
height: 100px;
background-color: red;
filter: alpha(opacity:30);
opacity: 0.3;
}
</style>
</head>
<body>
<input id="btn" type="button" value="click"></input>
<div id="div1"></div>
<script src="move2.js"></script>
<script type="text/javascript">
var oDiv1=document.getElementById('div1');
var oBtn=document.getElementById('btn');

oBtn.onclick=function(){
move(oDiv1,{width:101,height:300,opacity:100});//bug 当width值为101时。变到101直接关定时器，不会等到高和透明度到达目标值。
}
</script>
</body>
</html>

javascript运动应用的更多相关文章

  1. javascript运动系列第一篇——匀速运动

    × 目录 [1]简单运动 [2]定时器管理 [3]分享到效果[4]移入移出[5]运动函数[6]透明度[7]多值[8]多物体[9]回调[10]函数完善[11]最终函数 前面的话 除了拖拽以外,运动也是j ...

  2. Popmotion – 小巧，灵活的 JavaScript 运动引擎

    Popmotion 是一个只有12KB的 JavaScript 运动引擎,可以用来实现动画,物理效果和输入跟踪.原生的DOM支持:CSS,SVG,SVG路径和DOM属性的支持,开箱即用.Popmoti ...

  3. javascript运动框架（三）

    迟到了好几天,不好意思哈!继续来优化一下javascript运动框架的代码.之前的代码存在bug,当重复点击时速度会加快,那么怎么解决这个bug呢? 现在我们就来解决一下,其实很简单,在开始运动时,关 ...

  4. 好程序员技术教程分享JavaScript运动框架

    好程序员技术教程分享JavaScript运动框架,有需要的朋友可以参考下. JavaScript的运动,即让某元素的某些属性由一个值变到另一个值的过程.如让div的width属性由200px变到400 ...

  5. 原生JavaScript运动功能系列（五）：定时定点运动

    原生JavaScript运动功能系列(一):运动功能剖析与匀速运动实现 原生JavaScript运动功能系列(二):缓冲运动 原生JavaScript运动功能系列(三):多物体多值运动 原生JavaS ...

  6. 原生JavaScript运动功能系列（四）：多物体多值链式运动

    原生JavaScript运动功能系列(一):运动功能剖析与匀速运动实现 原生JavaScript运动功能系列(二):缓冲运动 原生JavaScript运动功能系列(三):多物体多值运动 多物体多值链式 ...

  7. 原生JavaScript运动功能系列（二）：缓冲运动

    匀速运动实现回顾 缓冲运动剖析 示例实现 方法提取 匀速运动实现回顾及缓冲运动剖析: 在这个系列的上一篇博客中原生JavaScript运动功能系列(一):运动功能剖析与匀速运动实现就运动的核心功能组成 ...

  8. 【repost】JavaScript运动框架之速度时间版本

    一.JavaScript运动框架之速度版 1.1 运动框架的实现思路 运动,其实就是在一段时间内改变 left . right . width . height . opactiy 的值,到达目的地之 ...

  9. day41—JavaScript运动的停止条件

    转行学开发,代码100天——2018-04-26 前面学过了JavaScript运动的两种常用情形:匀速运动与缓冲运动.在这两种运动的处理过程中最大的区别在于速度的处理和到达目标点的处理. 即本文需要 ...

  10. javascript运动系列第六篇——轨迹和投掷

    × 目录 [1]运动轨迹 [2]拖拽轨迹 [3]投掷 前面的话 一般地,不同的运动形式会产生不同的轨迹.但仅凭肉眼去识别运动轨迹,其实并不是很直观.因此,在页面中显示运动轨迹,是一个重要的问题.物体初 ...

随机推荐

  1. selenium ide脚本回放出现element not found

    原因: 点击按钮,没有设置时间延迟,而页面加载,需要时间:当页面元素未加载完全,执行点击事件,就会报错:element... not found. 解决方案: 在点击事件前添加新的COMMAND.设置 ...

  2. Unity3D 中的协程

    若干文章: 1.Coroutine,你究竟干了什么? 2.Radical Coroutines 3.Extended Unity Coroutines

  3. C#设置通过代理访问ftp服务器

    // 创建FTP连接 private FtpWebRequest CreateFtpWebRequest(string uri, string requestMethod) { FtpWebReque ...

  4. 使用 AngularJS & NodeJS 实现基于token 的认证应用（转）

    认证是任何 web 应用中不可或缺的一部分.在这个教程中,我们会讨论基于 token 的认证系统以及它和传统的登录系统的不同.这篇教程的末尾,你会看到一个使用 AngularJS 和 NodeJS 构 ...

  5. canvas动画

    1.动画主要是requestAnimationFrame方法,现在我们来一步步实现一个在画布内滚动的实例. html代码: <canvas id="canvas" width ...

  6. Atom使用到的插件

    atom-beautify atom-css-class-checker atom-css-comb atom-css-unit-converter atom-csscomb atom-csslint ...

  7. 搭建Hadoop2.6.4伪分布式

    准备工作 操作系统 CentOS 7 软件环境 JDK 1.7.0_79 下载地址 SSH,正常来说是系统自带的,若没有请自行搜索安装方法 关闭防火墙 systemctl stop firewalld ...

  8. 大数的除法 不使用BigInteger Java实现

    import java.util.Arrays; public class Solution { public void div(String a, String b) { char[] chara ...

  9. iOS版本更新的App提交审核流程

    App的版本更新估计是在所难免的了!更新App和新的App发布有何不同了?今天我们一起来看看吧!在发布App的时候我们需要通过开发者帐号——(申请)——>发布证书(需要钥匙串对证书签名也叫加密( ...

  10. js写的闹钟，支持多个闹钟

    因为玩一个游戏,该游戏可以支持多个号,每个号有好多等时间的任务. 来回切换看,太耽误时间.手机的闹钟操作太麻烦. 所以写了一个使用配置文件的闹钟,简单方便. var ForReading = 1, F ...