多物体运动框架：

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. Web之路笔记之三 - 使用Floating实现双栏样式

    2014秋季学期Web2.0课程实验 <Lab2 - Journal> 1. 对CSS的BOX MODEL进行亲密接触,理解他的用途. 2. 在float图片的时候,发现此时图片脱离了原来 ...

  2. OpenBSD之开篇

    对BSD有特殊的情节,早在大学的时候最初迷恋FreeBSD,还记得第一个折腾的版本是5.x,后来组件转到折腾Linux,但那份情节还是在心底,再加上越发觉得Linux的一盘散沙和BSD的完整性形成鲜明 ...

  3. vue的选项

    这篇是我自己看着方便整理的,请直接看官方api:http://cn.vuejs.org/v2/api/ 数据 data,props,computed 注意,不应该使用箭头函数来定义计算属性函数 (例如 ...

  4. Web自动化基础（一）使用Selenium定位元素

    什么是元素?我们知道网页上有什么内容显示出来,比如一个按钮,一个输入框,一张图片,都可以理解成元素,这些元素是由html代码构成的,比如图片可以用<img>标签来展示,一个输入框可以用&l ...

  5. 工作需求----表单多选框checkbox交互

    关于多选框,反选及选取几个: 1.html内容 <!--begin checkbox--> <div class="c_n_manage_tablexx"> ...

  6. 【原创】MVC4+Jquery+EasyUI实现的工作流平台

    最近把工作流从传统的WebFrom上迁移到我的MVC4安全权限基础框架中,感觉非常不错MVC4在各方面给用户的体验确实跟以前传统的WEB是质的提升.由于后面要做基于工作流技术的ERP,所以需要先把工作 ...

  7. Debian/Ubuntu/CentOS VPS安装Net-Speeder并优化

    安装过程: CentOS安装 wget --no-check-certificate https://gist.github.com/LazyZhu/dc3f2f84c336a08fd6a5/raw/ ...

  8. XSLT函数集合：数值函数、字符串函、节点集函数和布尔函数

    任何的编程语言或者是SQL语句都有内置的函数或方法,而强大灵活的xslt技术也是如此.熟练掌握XSLT的常用函数的用法,XSLT的应用将变得如此轻松,你会发现XSLT比想象中还要牛!以下是xslt数值 ...

  9. java时间戳

    1.时间戳的定义 时间戳是指文件属性里的创建.修改.访问时间. 数字时间戳技术是数字签名技术一种变种的应用.在电子商务交易文件中,时间是十分重要的信息.在书面合同中,文件签署的日期和签名一样均是十分重 ...

  10. 使用ajaxfileupload.js实现文件上传

    ajaxFileUpload是一个异步上传文件的jQuery插件 语法:$.ajaxFileUpload([options]) options参数说明: 1.url  上传处理程序地址. 2,file ...