Home > Developer > JavaScript
Multi-Object Motion frame:
1. Multiple boxes simultaneously motion: Move (obj,target) one more parameter
<! DOCTYPE html>
<title></title>
<style type= "Text/css" >
div{
width:100px;
height:50px;
background-color:red;
margin:10px;
}
</style>
<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>
2. Multiple box fades
<! DOCTYPE html>
<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>
<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; There is a problem, can not be shared while moving out, the smaller side of the move into the larger solution: as a property added to the body
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>
Open a few more timers, and nothing can be shared (such as Alpha).
Arbitrary value Motion Frame: Move (obj,attr,target)
1. Set different changes to the box through a set of frames
<! DOCTYPE html>
<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>
<body>
<div id= "Div1" > Change opacity </div>
<div id= "DIV2" > variable length </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) {//Get styles that are not inline
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)); Convert parseint to integers converts opacity directly to 0
var cur=0;
if (arrt== ' opacity ') {
Cur=math.round (parsefloat (GetStyle (OBJ,ARRT)) *100); For transparency
}
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 '; Transparency cannot be +px
}
}
},30)
}
</script>
</body>
Because transparency is a bug in the original frame, there is another reason for transparency to be judged.
Eg: Imitation Flash animation
GitHub Address: Https://github.com/hhhxy/jsFlash
Chain motion: Move (OBJ,ATTR,TARGET,FN) plus a function parameter
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)); Convert parseint to integers converts opacity directly to 0
var cur=0;
if (arrt== ' opacity ') {
Cur=math.round (parsefloat (GetStyle (OBJ,ARRT)) *100); For transparency
}
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 '; Transparency cannot be +px
}
}
},30)
}
Application:
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title> Motion Frames </title>
<style type= "Text/css" >
#div1 {
width:100px;
height:100px;
background-color:red;
Filter:alpha (opacity:30);
opacity:0.3;
}
</style>
<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>
Perfect Motion Frame:
Transparency, size pass 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)); Convert parseint to integers converts opacity directly to 0
var bstop=true; Assuming that all values are already
For (ARRT in JSON)//Make a loop, each cycle depends on the data in the JSON
{
var cur=0;
if (arrt== ' opacity ') {
Cur=math.round (parsefloat (GetStyle (OBJ,ARRT)) *100); For transparency
}
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 '; Transparency cannot be +px
}
}
if (bstop==true)
{
Clearinterval (Obj.timer);
if (fnend) fnend ();
}
},30)
}
Application
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title> Perfect Sports </title>
<style type= "Text/css" >
#div1 {
width:100px;
height:100px;
background-color:red;
Filter:alpha (opacity:30);
opacity:0.3;
}
</style>
<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 when the width value is 101. Change to 101 direct off timer, not wait for high and transparency to reach target value.
}
</script>
</body>
JavaScript motion Apps
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
