We have introduced the Javascript back to the top effect. Today, we will further study Javascript animation. In this blog post, we will only introduce simple constant speed movement, simple buffering movement and simple multi-object movement. After that, we will also introduce any value changes, chain movement, and simultaneous movement. At the same time, we will also simply encapsulate a motion plug-in and compare the Javascript method with the jquery method.
1. Simple uniform movement
Next, we introduce a demo, the mouse moves in, the animation moves to the right (that is, the hidden part is displayed); the mouse leaves, the animation moves to the left (continue to hide). The whole process is uniform. With the effect back to the top as the basis, here we mainly explain the important parts, let’s take a look at the code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>demo1</title>
<style type="text/css">
body,div,span{
margin: 0px;
padding: 0px;
}
#div1{
width: 200px;
height: 200px;
background: red;
position: relative;
left: -200px;
}
#share{
width: 20px;
height: 40px;
background: blue;
position: absolute;
left: 200px;
top: 75px;
}
</style>
<script type="text/javascript">
//Load as soon as you come in = function(){
//Get div var oDiv = ('div1');
//Execute the function when the mouse is moved in = function(){
startMove();
}
//Execute the function when the mouse is moved out = function(){
startMove1();
}
}
//Define a timer var timer = null;
function startMove(){
//Let it clear the timer as soon as it comes in to avoid introducing multiple timers later clearInterval(timer);
var oDiv = ('div1');
//Insert a timer timer = setInterval(function(){
// = +10+'px';
// //offsetLeft The current value of left// // The result of running at this time is that after the mouse is moved up, it keeps moving. At this time, if you need to make a judgment if( == 0){
//When the current left value is 0, clear the timer clearInterval(timer);
}
else{
//When the current left value is not 0, move = +10+'px';
}
},30)
}
function startMove1(){
clearInterval(timer);
var oDiv = ('div1');
timer = setInterval(function(){
if( == -200){
clearInterval(timer);
}
else{
= -10+'px';
}
},30)
}
//Can modify the same part in the current content
</script>
</head>
<body>
<div >
<span >
share
</span>
</div>
</body>
</html>
In the Javascript part, we found that there are a lot of code duplicates. At this time, we can pass in different places with parameters. The main code is as follows:
/*
* The previous onmouseover and onmouseout events were changed to
* startMove(10,0);
* startMove(-10,-200);
* Later, merge the two functions startMove and startMove1, and the code is as follows:
*/
function startMove(speed,iTarget){
clearInterval(timer);
var oDiv = ('div1');
timer = setInterval(function(){
if( == iTarget){
clearInterval(timer);
}
else{
= +speed+'px';
}
},30)
}
At this time, we will still find a problem, that is, when the functions are the same, the fewer parameters, the better. At this time, we need to make further modifications to our previous code. Because iTarget is the target value, we consider removing the speed parameter, and the code is as follows:
//Consider the principle that fewer parameters are the better. You can remove the speed. At the same time, the previous onmouseover and onmouseout events should also be changed accordingly.function startMove(iTarget){
clearInterval(timer);
var oDiv = ('div1');
timer = setInterval(function(){
//Define a speed var speed = 0;
//Judge speed if( > iTarget){
//When > iTarget, it should be moved to the left speed = -10;
}
else{
speed = 10;
}
if( == iTarget){
clearInterval(timer);
}
else{
= +speed+'px';
}
},30)
}
At this point, our constant speed movement effect has been basically completed. In the above demo, we change the left effect, and we can also change the right, width and height effects. Thinking: There is an effect of changing transparency in css3 animation. Can we achieve it in the previous way?
Answer:It can be roughly implemented using the above method, but there is a small problem that is worth noting. Whether it is left, right or width, height, they all have unit px (in the above demo, there is a line of code like this: = +speed+'px';), and transparency, whether it is opacity or filter, they all have no units, so we can write the following code:
alpha += speed; = 'alpha(opacity:'+alpha+')'; = alpha/100;
The complete code is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>demo2</title>
<style type="text/css">
body,div{
margin: 0px;
padding: 0px;
}
#div1{
width: 200px;
height: 200px;
background: red;
filter: alpha(opacity:30);
opacity: 0.3;
}
</style>
<script type="text/javascript">
= function(){
var oDiv = ('div1');
= function(){
startMove(100); //When moving the mouse in, the transparency is 100% }
= function(){
startMove(30); //When the mouse is moved out, the transparency is 30% }
}
var timer = null;
var alpha = 30;
function startMove(iTarget){
var oDiv = ('div1');
clearInterval(timer); //Switch off the timer before running //After turning off the timer, the timer needs to be added when running now timer = setInterval(function(){
var speed = 0;
if(alpha > iTarget){
speed = -10;
}
else{
speed = 10
}
if(alpha == iTarget){
clearInterval(timer);
}
else{
alpha += speed;
= 'alpha(opacity:'+alpha+')';
= alpha/100;
}
},30)
}
</script>
</head>
<body>
<div >
Require：
<p>Move in，Transparency is100%；Mouse out，Transparency is30%</p>
</div>
</body>
</html>
At this point, our speed animation comes to an end. For details about opacity and filter, please see here
2. Buffering motion
I went back to the top before recalling the effect. In order to increase the user's experience effect, when returning to the top, it was fast first and then slow. With the previous foundation, this sentence is easy to do. Taking demo1 as an example, we can add the following code:
function startMove(iTarget){
var oDiv = ('div1');
clearInterval(timer);
timer = setInterval(function(){
var speed = (iTarget - )/20;
speed = speed>0?(speed):(speed);
// Pay attention to the rounding problem here, otherwise you will not be able to return to your original position after exercise// if(speed > 0){
// speed = (speed);
// }
// else{
// speed = (speed);
// }
if(iTarget == ){
clearInterval(timer);
}
else{
= +speed+'px';
}
},30)
}
In this code, var speed = (iTarget - )/20; by controlling the divisor, we can control the speed of the animation, and then we use and round down and up respectively. If we don’t use rounding, then the mouse is moved in and out of the way (the computer always has errors when performing calculations). At this point, the buffering movement has been introduced almost. Let’s introduce the movement of multiple objects.
3. Movement of multiple objects
With the previous foundation, we find it simple when we look at the movement of multiple objects. In the movement of multiple objects, we separate the width change and the transparency change.
【Variation of multi-object width】
In the variation of multi-object width, we use unordered lists to achieve it. Unlike a single object width change, we need to use a for loop to traverse the value we want in sequence. The key code is as follows:
var aLi = ('li');
for(var i = 0; i< ; i++){ //i=0
aLi[i].onmouseover = function(){
startMove(this,400);
}
aLi[i].onmouseout = function(){
startMove(this,200);
}
}
The full code is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Multi-object animation</title>
<style type="text/css">
body,ul,li{
margin: 0px;
padding: 0px;
}
ul,li{
list-style: none;
}
ul li{
width: 200px;
height: 100px;
background: yellow;
margin-bottom: 20px;
}
</style>
<script type="text/javascript">
= function(){
var aLi = ('li');
for(var i = 0; i< ; i++){ //i=0
aLi[i].timer = null;
aLi[i].onmouseover = function(){
startMove(this,400);//this points to the current aLi[i].onmouseover event }
aLi[i].onmouseout = function(){
startMove(this,200);//this points to the current aLi[i].onmouseout event }
}
}
//var timer = null;
/*
* If the code is still here, there will be no major problems when the mouse passes slowly in turn, but when the speed of movement is faster, you will find that there is a problem: it can become wider and wider.
* Reason: Timer is not null every time the mouse passes through each area
* Solution: Add aLi[i].timer = null to the previous for loop; so that null starts before each execution
*/
function startMove(obj,iTarget){//Because there are multiple lis, you need to pass another parameter obj here //var aLi = ('li');
clearInterval();
= setInterval(function(){
var speed = (iTarget - )/10;
speed = speed>0?(speed):(speed);
if(iTarget == ){
clearInterval();
}
else{
= +speed+'px';
//It's obj not aLi }
},30)
}
</script>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
【Multi-object transparency animation】
With the above example, we can easily write the code for multi-object transparency animation, the code is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Multi-object transparency animation</title>
<style type="text/css">
body,div{
margin: 0px;
padding: 0px;
}
div{
width: 200px;
height: 200px;
background: red;
margin: 10px;
float: left;
filter:alpha(opacity:30);
opacity:0.3;
}
</style>
<script type="text/javascript">
= function(){
var oDiv = ('div');
for(var i=0;i<;i++){
oDiv[i].timer = null;
oDiv[i].alpha = 30;
oDiv[i].onmouseover = function(){
startMove(this,100);
}
oDiv[i].onmouseout = function(){
startMove(this,30);
}
}
}
//var alpha = 30;
function startMove(obj,iTarget){
clearInterval();
= setInterval(function(){
var speed = 0;
if(iTarget > ){
speed = 10;
}
else{
speed = -10;
}
if(iTarget == ){
clearInterval();
}
else{
+=speed;
= '(opacity:'++')';
= /100;
}
},30)
}
</script>
</head>
<body>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
</body>
</html>
Like the previous timer, alpha = 30; also needs to be written after the for loop.
At this point, the simple animation effect comes to an end. If you modify it step by step, you will find new discoveries.
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.