多物体运动框架：

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. java list 简述

    list中可以添加任何对象,我可以给你举个例子:class Person{ .....}上面定义了一个Person类,下面看好如何使用ListPerson p1=new Person();Person ...

  2. 批量转换编码 (gbk -> utf8)

    使用 Notepad++ 批量的转换文件编码:Mass convert a project to UTF-8 using Notepad++ 步骤如下: 1.一般 Noptepad++ 安装完后已经自 ...

  3. 读javascript高级程序设计17-在线检测,cookie,子cookie

    一.在线状态检测 开发离线应用时,往往在离线状态时把数据存在本地,而在联机状态时再把数据发送到服务器.html5提供了检测在线状态的方法:navigator.onLine和online/offline ...

  4. WCF初探-27：WCF中的实例化

    理解WCF中的实例化机制 “实例化”是指对用户定义的服务对象以及与其相关的 InstanceContext 对象的生存期的控制.也就是说我们的客户端程序在调用服务端方法时,需要实例化一个服务端代理类对 ...

  5. bzoj2006: [NOI2010]超级钢琴

    题意:给一个序列(n<=500000),要求选定k个不同区间,使得区间长度在L,R之间,并使得k个区间和之和最大,输出这个最大值. 刚拿到题的时候想的是,对于每个点,如果以它开头,那么之后的L- ...

  6. 苹果公布WWDC2016时间 并做了个程序员情怀网页

    新浪手机讯 4月19日上午消息,苹果公司今日正式确定2016年全球开发者大会(WWDC)开幕时间:6月13-17日,并做了个非常有意思的代码风格页面. 网友戏称这个页面只有程序员们才能看懂,它的首页是 ...

  7. C++学习进度0

    昨天,又把<C++ primer> 刷了一遍,这一次看的是陈硕大大的评注版,重点看了陈硕的注释,<Accelerated C++>去年就把代码巧了一遍,<C++ prim ...

  8. 个人纪录（初）----配置文件.properties的简单读取

    本文为个人文本纪录. demo:::: 1.创建普通的java项目:这实例项目名字叫properties. 2.创建.properties文件:src目录下创建XX.properties文件,识别&q ...

  9. UILabel多种字体

    UILabel *label = [[UILabel alloc] init]; label.text = @"UILabel多种字体"; UIFont *font = [UIFo ...

  10. AngularJS的学习笔记（一）

    声明:单纯作为我自己的学习笔记,纯是为了自己学习,上面的话都是从各处粘贴,如有冒犯,请原谅我这个小菜鸟~ AngularJS使用了不同的方法,它尝试去补足HTML本身在构建应用方面的缺陷. 使用双大括 ...