javascript运动应用

多物体运动框架：

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）加一个函数参数

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）

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运动应用的更多相关文章

javascript运动系列第一篇——匀速运动
× 目录 [1]简单运动 [2]定时器管理 [3]分享到效果[4]移入移出[5]运动函数[6]透明度[7]多值[8]多物体[9]回调[10]函数完善[11]最终函数前面的话除了拖拽以外,运动也是j ...
Popmotion – 小巧，灵活的 JavaScript 运动引擎
Popmotion 是一个只有12KB的 JavaScript 运动引擎,可以用来实现动画,物理效果和输入跟踪.原生的DOM支持:CSS,SVG,SVG路径和DOM属性的支持,开箱即用.Popmoti ...
javascript运动框架（三）
迟到了好几天,不好意思哈!继续来优化一下javascript运动框架的代码.之前的代码存在bug,当重复点击时速度会加快,那么怎么解决这个bug呢? 现在我们就来解决一下,其实很简单,在开始运动时,关 ...
好程序员技术教程分享JavaScript运动框架
好程序员技术教程分享JavaScript运动框架,有需要的朋友可以参考下. JavaScript的运动,即让某元素的某些属性由一个值变到另一个值的过程.如让div的width属性由200px变到400 ...
原生JavaScript运动功能系列（五）：定时定点运动
原生JavaScript运动功能系列(一):运动功能剖析与匀速运动实现原生JavaScript运动功能系列(二):缓冲运动原生JavaScript运动功能系列(三):多物体多值运动原生JavaS ...
原生JavaScript运动功能系列（四）：多物体多值链式运动
原生JavaScript运动功能系列(一):运动功能剖析与匀速运动实现原生JavaScript运动功能系列(二):缓冲运动原生JavaScript运动功能系列(三):多物体多值运动多物体多值链式 ...
原生JavaScript运动功能系列（二）：缓冲运动
匀速运动实现回顾缓冲运动剖析示例实现方法提取匀速运动实现回顾及缓冲运动剖析: 在这个系列的上一篇博客中原生JavaScript运动功能系列(一):运动功能剖析与匀速运动实现就运动的核心功能组成 ...
【repost】JavaScript运动框架之速度时间版本
一.JavaScript运动框架之速度版 1.1 运动框架的实现思路运动,其实就是在一段时间内改变 left . right . width . height . opactiy 的值,到达目的地之 ...
day41—JavaScript运动的停止条件
转行学开发,代码100天——2018-04-26 前面学过了JavaScript运动的两种常用情形:匀速运动与缓冲运动.在这两种运动的处理过程中最大的区别在于速度的处理和到达目标点的处理. 即本文需要 ...
javascript运动系列第六篇——轨迹和投掷
× 目录 [1]运动轨迹 [2]拖拽轨迹 [3]投掷前面的话一般地,不同的运动形式会产生不同的轨迹.但仅凭肉眼去识别运动轨迹,其实并不是很直观.因此,在页面中显示运动轨迹,是一个重要的问题.物体初 ...

随机推荐

Python学习笔记之条件、循环和其他语句
一.函数导入 1.为模块提供别名 >>> import math as foobar #设置math 别名为foobar >>> foobar.sqrt(4) 显示 ...
使用caffe时遇到的问题
1.Error: (unix time) try if you are using GNU date 问题所在: 在训练train.txt图片列表位置和生成的lmbd数据不符. 解决方案: 修改tra ...
C#winform调整控件的位置
现在有三个控件并排放置第二个控件有隐藏功能隐藏后第一个控件和第三个控件的距离要缩小,于是就要改变第三个控件的位置尝试用Location.X属性去设置,但是被告知此非变量于是只能另外想办法搜到 ...
F2工作流引擎这工作流引擎体系架构（二）
F2工作流体系架构概览图为了能更好的了解F2工作流引擎的架构体系,花了些时间画了整个架构的体系图.F2工作流引擎遵循参考WFCM规范,目标是实现轻量级的工作流引擎,支持多种数据库及快速应用到任何基于 ...
javasript_数据结构和算法_栈
//-----------------------------------存储结构为数组-------------------------------------------- function St ...
daydayup2 codeforces143C
题意:给你n= (A - 1) × (B - 2) × (C - 2),求A*B*C的最大值和最小值思路:要用好的姿势暴力 #include "stdio.h" #include ...
iOS 支付宝第三方使用步骤
使用支付宝进行一个完整的支付功能,大致有以下步骤: 1 与支付宝进行签约,获得商户ID(partner)和账号ID(seller) 2 下载相应的公钥私钥文件(加密签名用) 3 下载支付宝SDK 4 ...
使用git删除远程仓库文件
git rm -r -f --cached 文件或文件夹 git commit -m "移除文件或文件夹" git push origin master 注意:要删除的文件或文件夹 ...
干货分享：MySQL之化险为夷的【钻石】抢购风暴
抢购钻石不稀奇,稀奇的是有钱赚不到,事情发生在2015年5月20日,大好的日子自然少不了商家的参与.即可为您还原现场,解决思路献给各位,请欣赏Show Time,everybody~ 1.优化起因及工 ...
Oracle之内存结构（SGA、PGA）
一.内存结构 SGA(System Global Area):由所有服务进程和后台进程共享: PGA(Program Global Area):由每个服务进程.后台进程专有:每个进程都有一个PGA. ...

javascript运动应用

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

随机推荐

热门专题