Summary of basic motion logic thought in JS

Summarize your basic idea of learning Sports Today: '

"1" for a moving div, so that it stops in a position to encapsulate it as a function, just change the speed of the plus or minus

Issues involved include:

var time=null;

function Startmove (target)

{

var Odiv=document.getelementbyid (' div ');

Clearinteral (time);//Clear Timer

Time=setinteral (function ()

{

var speed=0;

if (odiv.offsetleft<target) {speed= positive;}

else{speed= negative;}//Consider the first div on the left or right of the target value

if (odiv.offsetleft==target) {clearinteral (time);}

else{odiv.style.left=odiv.offsetleft+speed+ ' px ';}

},30);

}

The "2" fade picture is made with variables to store values.

var alpha=30;//store Variable Value
var time=null;
function Startmove (target)
{
var Img=document.getelementbyid (' Img1 ');
Clearinterval (time);
Time=setinterval (function ()
{
var speed=0;
if (alpha<target) {speed=1;}
Else{speed=-1;}
if (alpha==target) {clearinterval (time);}
else{
Alpha+=speed;
img.style.opacity=alpha/100;//Firefox is the value between Opacity:0-1 and IE is: Filter:alpha (opacity=30); value between 0-100
Document.title=alpha;
}

},30);
}

"3" sidebar sharing of the production process, the same as above "1", mainly to change the left value is set to 0 or-100, add mouse to move out of the event.

"4" The basic idea of slow motion is similar to that above, but speed is a variable, speed= target value-Original value

var time=null;

function Startmove (target)

{

var Odiv=document.getelementbyid (' div ');

Clearinteral (time);//Clear Timer

Time=setinteral (function ()

{

var speed= (target-odiv.setoffleft)/fixed factor;//Here the fixed coefficient can be any number such as: 7,8 ... etc....

Speed=speed>0? Math.ceil (Speed): Math.floor (speed);//ceil is rounding up the floor is rounding down to avoid minor deviations from the target value.

if (odiv.offsetleft==target) {clearinteral (time);}

else{odiv.style.left=odiv.offsetleft+speed+ ' px ';}

},30);

}

The share div in the right sidebar of "5" keeps the distance from the scroll bar, slowly stopping the process.

1: First get the scroll bar distance: scrolltop=document.documentelement.scrolltop| | Document.body.scrollTop

2: Get the distance between Div and viewable area: Var t= (document.documentelement.clientheight-odiv.offsetheight)/2

The height of the 3:div is: odiv.style.top=t+scrolltop+ ' px '; you need to use the Paresint () function to convert a high to an integer

Window.onscroll=function ()------Note here that the scrollbar is the Windon.onscroll event
{
var Odiv=document.getelementbyid (' Div1 ');
var scrolltop=document.documentelement.scrolltop| | Document.body.scrollTop;
var t=scrolltop+ (document.documentelement.clientheight-odiv.offsetheight)/2+ ' px ';
Startmove (parseint (t)); Convert it to an integer to avoid scrolling up or down the scroll bar
}
var time=null;
function Startmove (target)
{
var Odiv=document.getelementbyid (' Div1 ');
Clearinterval (time);
Time=setinterval (function ()
{
var speed= (target-odiv.offsettop)/8;
Speed=speed>0? Math.ceil (Speed): Math.floor (speed);
if (odiv.style.top==target) {clearinterval (time);}
else{odiv.style.top=odiv.offsettop+speed+ ' px ';}
Txt1.value=odiv.offsettop+ ', Goal: ' +target;
},30);
}

Summary of basic motion logic thought in JS