Home > Developer > JavaScript
JavaScript movement is very practical, by controlling the actual distance between the motion block and the distance to reach, combined with a timer to control the movement of small squares.
Motion Frame
<! DOCTYPE html>
<title></title>
<style type= "Text/css" >
#div1 {
width:100px;
height:100px;
Position:absolute;
top:50px;
left:50px;
background-color:red;
}
</style>
<body>
<div id= "Div1" ></div>
<input id= "btn" type= "button" value= "Start" onclick= "Move ()" ></input>
<script type= "Text/javascript" >
var timer=null;
function Move () {
var Odiv1=document.getelementbyid (' Div1 ');
Clearinterval (timer); Before entering the function, clear the other timers to ensure that only one timer is enabled each time.
Timer=setinterval (function () {
var speed=10; Determines the speed of motion by controlling the size of the velocity value
if (odiv1.offsetleft>=300) {//Stop condition
Clearinterval (timer); If the condition is met, stop and empty the timer
}
else{
odiv1.style.left=odiv1.offsetleft+speed+ ' px '; Keep moving if you don't meet the criteria
}
},30)//every 30 milliseconds
}
</script>
</body>
The motion frame, the control speed fast and slow condition has two: 1. Timer time, 2. Speed. Generally do not recommend the first, the time is generally through the precise calculation of thinking, decided to do not change, most can be modified speed variable to control the velocity.
EG1: Share to sidebar effect
<! DOCTYPE html>
<meta charset= "Utf-8" >
<title></title>
<style type= "Text/css" >
#div1 {
background-color:red;
width:150px;
height:200px;
Position:absolute;
Left: -150px;
top:50px;
}
#div1 span{
Background-color:green;
width:20px;
height:80px;
Position:absolute;
Right: -20px;
top:80px;
}
</style>
<body>
<div id= "Div1" ><span> share to </span>
</div>
<script type= "Text/javascript" >
Window.onload=function () {
var Odiv1=document.getelementbyid (' Div1 ');
Odiv1.onmouseover=function () {
Move (0);
};
Odiv1.onmouseout=function () {
Move (-150);
}
};
var timer=null;
function Move (destion) {
var Odiv1=document.getelementbyid (' Div1 ');
Clearinterval (timer);
Timer=setinterval (function () {
var speed=0;
if (odiv1.offsetleft>destion)//The difference between the actual distance and the target address to determine the positive or negative speed, can omit a function of a speed parameter, if the actual distance is greater than the target address, the speed is negative
{
speed=-10;
}
else//Otherwise, the actual distance is less than the target distance and the speed is positive
{
speed=10;
}
if (odiv1.offsetleft==destion)
{
Clearinterval (timer);
}
else{
odiv1.style.left=odiv1.offsetleft+speed+ ' px ';
}
},30)
}
</script>
</body>
EG2: Fade effect of pictures
<! DOCTYPE html>
<title></title>
<style type= "Text/css" >
#div1 {
height:200px;
width:200px;
background-color:red;
Filter:alpha (opacity:30); /* Compatible IE */
opacity:0.3; /* Firefox, Google */
}
</style>
<body>
<div id= "Div1" ></div>
<script type= "Text/javascript" >
Window.onload=function () {
var Odiv1=document.getelementbyid (' Div1 ');
Odiv1.onmouseover=function () {
Move (100);
}
Odiv1.onmouseout=function () {
Move (30);
}
}
var timer=null;
var alpha=30; Storing transparency with parameters
function Move (target) {//parameter is the target value, the number of transparency to be
var Odiv1=document.getelementbyid (' Div1 ');
Clearinterval (timer);
Timer=setinterval (function () {
var speed;
if (alpha<target)//Determine the current transparency and the transparency of the target
{
speed=10;
}
else{
speed=-10;
}
if (alpha==target)
{
Clearinterval (timer);
}
else{
Alpha+=speed;
Odiv1.style.filter= ' alpha (opacity: ' +alpha+ ') ';
odiv1.style.opacity=alpha/100;
}
},30);
}
</script>
</body>
EG3: Buffer movement:
<! DOCTYPE html>
<title></title>
<style type= "Text/css" >
#div1 {
width:100px;
height:100px;
background-color:red;
Position:absolute;
top:50px;
left:0px;
}
#div2 {
width:1px;
height:300px;
Background-color:black;
Position:absolute;
left:300px;
}
</style>
<body>
<div id= "Div1" ></div>
<div id= "Div2" ></div>
<input type= "button" value= "Start" onclick= "Move ()" ></input>
<script type= "Text/javascript" >
function Move () {
var Odiv1=document.getelementbyid (' Div1 ');
SetInterval (function () {
var speed= (300-odiv1.offsetleft)/10; The distance from the target will be shorter at different times, and the speed will be smaller with the exception of a fixed value.
Speed=speed>0? Math.ceil (Speed): Math.floor (speed); To the left to the right to the speed up or down rounding, px is the minimum pixel value, the computer minimum distance unit, will automatically down the whole, not rounded, the speed of 0.9, the computer is not recognized, so will not go to your expected location, will stop. For different directions, take an upward or downward rounding on him.
odiv1.style.left=odiv1.offsetleft+speed+ ' px ';
},30)
}
</script>
</body>
EG4: Buffer motion to secure the block to the lower right corner
<! DOCTYPE html>
<title></title>
<style type= "Text/css" >
#div1 {
width:100px;
height:150px;
Position:absolute;
Background-color:red;
right:0;
bottom:0;
}
</style>
<body style= "height:2000px";
<div id= "Div1" ></div
<script type= "Text/javascript";
Window.onscroll=function () {
var odiv1= document.getElementById (' Div1 ');
var scrolltop=document.documentelement.scrolltop| | Document.body.scrollTop; //Browser compatible
//odiv1.style.top= (document.documentelement.clientheight-odiv1.offsetheight)/2+ scrolltop+ ' px ';
Move (document.documentelement.clientheight-odiv1.offsetheight+scrolltop);
};
Var timer=null;
function Move (target) {
var odiv1=document.getelementbyid (' Div1 ');
Clearinterval (timer);
Timer=setinterval (function () {
var speed= (target-odiv1.offsettop)/8;
Speed=speed>0? Math.ceil (Speed): Math.floor (speed);
if (odiv1.offsettop==target)
{
Clearinterval (timer);
}
else{
odiv1.style.top=odiv1.offsettop+speed+ ' px ';
}
},30)
}
</script>
</body>
EG5: Cushioning movement fixed to right middle
<! DOCTYPE html>
<title></title>
<style type= "Text/css" >
#div1 {
width:100px;
height:150px;
Position:absolute;
Background-color:red;
right:0;
bottom:0;
}
</style>
<body style= "height:2000px";
<div id= "Div1" ></div
<script type= "Text/javascript";
Window.onscroll=function () {
var odiv1= document.getElementById (' Div1 ');
var scrolltop=document.documentelement.scrolltop| | Document.body.scrollTop;
//odiv1.style.top= (document.documentelement.clientheight-odiv1.offsetheight)/2+scrolltop+ ' px ';
Move (parseint ((document.documentelement.clientheight-odiv1.offsetheight)/2+scrolltop));
}
Var timer=null;
function Move (target) {
Clearinterval (timer);
var Odiv1=document.getelementbyid (' Div1 ');
Timer=setinterval (function () {
var speed= (target-odiv1.offsettop)/8;
Speed=speed>0? Math.ceil (Speed): Math.floor (speed);
if (odiv1.offsettop==target)
{
Clearinterval (timer);
}
else{
odiv1.style.top=odiv1.offsettop+speed+ ' px ';
}
},30)
}
</script>
</body>
Eg8: Uniform motion fixed to a specific location
<! DOCTYPE html>
<title></title>
<style type= "Text/css" >
#div1 {
width:100px;
height:100px;
background-color:red;
Position:absolute;
top:50px;
left:0px;
}
#div2 {
width:1px;
height:300px;
Background-color:black;
Position:absolute;
left:100px;
}
#div3 {
width:1px;
height:300px;
Background-color:black;
Position:absolute;
left:300px;
}
</style>
<body>
<div id= "Div1" ></div>
<div id= "Div2" ></div>
<div id= "Div3" ></div>
<input type= "button" value= "start100" onclick= "Move" ></input>
<input type= "button" value= "start300" onclick= "Move" ></input>
<script type= "Text/javascript" >
var timer=null;
function Move (target) {
var Odiv1=document.getelementbyid (' Div1 ');
Clearinterval (timer);
SetInterval (function () {
var speed=0;
Clearinterval (timer);
if (odiv1.offsetleft<target) {
speed=7;
}
else{
speed=-7;
}
if (Math.Abs (target-odiv1.offsetleft) <=7)//when encountering a near but unreachable condition, it can be approximated as reached to prevent jitter
{
Clearinterval (timer);
odiv1.style.left=target+ ' px '; Manually change his distance to the target distance
}
else{
odiv1.style.left=odiv1.offsetleft+speed+ ' px ';
}
},30)
}
</script>
</body>
The above summarizes the JS in the basis of motion, you can copy the code to see the effect
JavaScript Motion Basics
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
