Nine native js animation effects
- 2020-10-31 21:37:00
- OfStack
In doing the page, most of the time will encounter the animation effect on the page, we do most of the animation is to use the framework to do (such as jquery), here I introduce how to let the native js to achieve the animation effect like frame 1!
1. Uniform animation effect
Note: uniform speed animation is the effect of the animation from the beginning to the end of each execution speed is 1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> Animation at a constant speed </title>
<style type="text/css">
html,body{margin:0;padding:0;}
div{margin:0;padding:0;}
.odiv{width:200px; height:200px; background:#f00; position:relative; left:-200px; top:100px;}
.sdiv{width:20px; height:60px; background:#00f; position:absolute; top:70px; right:-20px;}
</style>
</head>
<body>
<div id="odiv" class="odiv">
<div id="sdiv" class="sdiv">
</div>
</div>
</body>
</html>
<script language="javascript">
window.onload = function(){
var odiv = document.getElementById('odiv');
odiv.onmouseover = function(){
startMover(0);
}
odiv.onmouseout = function(){
startMover(-200);
}
}
var timer = null;
function startMover(itarget){// The target
clearInterval(timer);// Execute the current animation and clear the previous animation
var odiv = document.getElementById('odiv');
timer = setInterval(function(){
var speed = 0;
if(odiv.offsetLeft > itarget){
speed = -1;
}
else{
speed = 1;
}
if(odiv.offsetLeft == itarget){
clearInterval(timer);
}
else{
odiv.style.left = odiv.offsetLeft+speed+'px';
}
},30);
}
// Note: offsetWidth = width+padding+border
//offsetHeight = height+padding+border
//offsetWidth=(border-width)*2+(padding-left)+(width)+(padding-right)
//offsetHeight=(border-width)*2+(padding-top)+(height)+(padding-bottom)
/*
offsetLeft=(offsetParent the padding-left)+( Intermediate elemental offsetWidth)+( Current element's margin-left) .
offsetTop=(offsetParent the padding-top)+( Intermediate elemental offsetHeight)+( Current element's margin-top) .
when offsetParent for body The situation is quite special :
in IE8/9/10 and Chrome , offsetLeft = (body the margin-left)+(body the border-width)+(body the padding-left)+( Current element's margin-left) .
in FireFox , offsetLeft = (body the margin-left)+(body the padding-left)+( Current element's margin-left) .
offsetParent Property returns 1 A reference to an object that is a distance call offsetParent Element is nearest (closest in the containment hierarchy) and has been performed CSS Locate the container element. If the container element is not performed CSS positioning , the offsetParent Attribute is a reference to the root element.
In summary, there are two rules:
1 , if the parent element of the current element has not been performed CSS Positioning ( position for absolute or relative ), offsetParent for body .
2 , if there is in the parent element of the current element CSS Positioning ( position for absolute or relative ), offsetParent Take the nearest parent element.
*/
</script>
2. Buffer animation
Note: A buffered animation is an animation that ends or begins with a speed that varies dynamically with the progress of the animation execution
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> Buffer animation </title>
<style type="text/css">
html,body{margin:0;padding:0;}
div{margin:0;padding:0;}
.odiv{width:200px; height:200px; background:#f00; position:relative; left:-200px; top:100px;}
.sdiv{width:20px; height:60px; background:#00f; position:absolute; top:70px; right:-20px;}
</style>
</head>
<body>
<div id="odiv" class="odiv">
<div id="sdiv" class="sdiv">
</div>
</div>
</body>
</html>
<script language="javascript">
window.onload = function(){
var odiv = document.getElementById('odiv');
odiv.onmouseover = function(){
startMover(0);
}
odiv.onmouseout = function(){
startMover(-200);
}
}
var timer = null;
function startMover(itarget){// Speed and target value
clearInterval(timer);// Execute the current animation and clear the previous animation
var odiv = document.getElementById('odiv');
timer = setInterval(function(){
var speed = (itarget-odiv.offsetLeft)/10;// Buffer animation speed parameter change values
// If the velocity is greater than 0 If you go to the right, you're going to round up
speed = speed>0?Math.ceil(speed):Math.floor(speed);
//Math.floor(); Take down the whole
if(odiv.offsetLeft == itarget){
clearInterval(timer);
}
else{
//clientLeft Return object's offsetLeft The distance between the property value and the real value to the left of the current window
odiv.style.left = odiv.offsetLeft+speed+'px';
}
},30);
}
</script>
3. Transparency animation
Description: Handles animations for element transparency effects
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> Transparency animation </title>
<style type="text/css">
html,body{margin:0;padding:0;}
div{margin:0;padding:0;}
.odiv{width:200px; height:200px; background:#f00; position:relative; left:0px; top:100px;opacity:0.3; filter:alpha(opacity:30); float:left; margin:10px;}
</style>
</head>
<body>
<div id="odiv" class="odiv"></div>
</body>
</html>
<script language="javascript">
window.onload = function(){
var odiv = document.getElementsByTagName('div');
for(var i=0;i<odiv.length;i++)
{
odiv[i].onmouseover = function(){
startOP(this,100);
}
odiv[i].onmouseout = function(){
startOP(this,30);
}
odiv[i].timer = null;// Defined in advance
odiv[i].alpha = null;// Defined in advance
// Here to find 1 Object animation property can not be defined, but the transparency property must be defined, otherwise an error is reported
}
}
function startOP(obj,utarget){
clearInterval(obj.timer);// Turn off the timer first
obj.timer = setInterval(function(){
var speed = 0;
if(obj.alpha>utarget){
speed = -10;
}
else{
speed = 10;
}
obj.alpha = obj.alpha+speed;
if(obj.alpha == utarget){
clearInterval(obj.timer);
}
obj.style.filter = 'alpha(opacity:'+obj.alpha+')';// Based on the IE the
obj.style.opacity = parseInt(obj.alpha)/100;
},30);
}
</script>
4. Multi-object animation
Description: Animation effect in which multiple objects are executed at 1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> Multi-object animation </title>
<style type="text/css">
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,tr,td {margin:0;padding:0; font-size:12px;}
table {border-collapse:collapse;border-spacing:0;}
fieldset,img {border:0}
address,caption,cite,code,dfn,em,strong,th,var {font-style:normal;font-weight:normal}
ol,ul {list-style:none}
caption,th,td{text-align:center}
h1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:normal}
q:before,q:after {content:''}
abbr,acronym { border:0}
.odiv{position:relative;}
.odiv ul li{width:200px; height:100px; background:yellow; margin-bottom:20px;}
</style>
</head>
<body>
<div id="odiv" class="odiv">
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>
<script language="javascript">
window.onload = function(){
var olist = document.getElementsByTagName('li');
for(var i=0; i<olist.length;i++)
{
olist[i].onmouseover = function(){
startmov(this,400);
};
olist[i].onmouseleave = function(){
startmov(this,200);
};
olist[i].timer = null;
}
function startmov(obj,itarget){
clearInterval(obj.timer);// Clear the animation before executing it
obj.timer = setInterval(function(){
var speed =0;
speed = (itarget - obj.offsetWidth)/8;
speed = speed>0?Math.ceil(speed):Math.floor(speed);
if(obj.offsetWidth == itarget){
clearInterval(obj.timer);
}
else{
obj.style.width = obj.offsetWidth+speed+'px';
}
},30);
}
}
//offsetWidth Gets the actual width of the element (both the border and the padding)
// As long as there are multiple objects moving, all properties cannot be Shared
</script>
5. Get style animation
Note: To get the style here, you calculate the style of the element, and then manipulate the element with that result
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> The style of animation </title>
<style type="text/css">
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,tr,td {margin:0;padding:0; font-size:12px;}
table {border-collapse:collapse;border-spacing:0;}
fieldset,img {border:0}
address,caption,cite,code,dfn,em,strong,th,var {font-style:normal;font-weight:normal}
ol,ul {list-style:none}
caption,th,td{text-align:center}
h1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:normal}
q:before,q:after {content:''}
abbr,acronym { border:0}
.odiv{position:relative;width:200px; height:200px; border:2px solid #000; background:red; font-size:20px;}
</style>
</head>
<body>
<div id="odiv" class="odiv">
hjshfjdfsdfhsdj
</div>
</body>
</html>
<script language="javascript">
/*
currentStyle : Gets the computed style, also known as current style, final style.
Advantage: You can get the final style of the element, including the browser's default values, instead of the like style You can only get inter-line styles, so it's more commonly used.
Note: Composite styles such as cannot be obtained background Attribute value, can only get a single 1 Style such as background-color And so on.
alert (oAbc.currentStyle);
Unfortunately, this handy thing is not perfectly supported by the major browsers either. Specifically, in the browser I tested, IE8 and Opera 11 Pop up the" object CSSStyleDeclaration "; FF 12 , chrome 14 , safari 5 The pop up" undefined ".
although currentStyle It doesn't work for all browsers, but you can use the results of the above tests to distinguish between supported and unsupported browsers, and then find compatible ones.
var oAbc = document.getElementById("abc");
if(oAbc.currentStyle) {
//IE , Opera
alert(" I support currentStyle");
} else {
//FF , chrome , safari
alert(" I don't support currentStyle");
}
In fact in FF We can use it in the browser getComputedStyle(obj,false) In order to achieve and IE Under the currentStyle Same effect.
getComputedStyle(obj,false) In: FF In the new version, only the control is required 1 Parameters, namely the operation object, and 2 The parameters are written as" false "Is also a common way of writing, in order to be compatible with older versions of the Firefox browser.
Compatible writing method:
var oAbc = document.getElementById("abc");
if(oAbc.currentStyle) {
//IE , Opera
//alert(" I support currentStyle");
alert(oAbc.currentStyle.width);
} else {
//FF , chrome , safari
//alert(" I don't support currentStyle");
alert(getComputedStyle(oAbc,false).width);
}
1 In a blank page body the id= " abc ", test the above code, IE and Opera The pop-up" auto ", and other 3 Browser will pop up" ***px ". The results are different, but you can see it chrome and safari And firefox too 1 The value of the property was read successfully. Does not support currentStyle the 3 browser (FF , chrome , safari) It's all support getComputedStyle .
The results show whether the browser is supported currentStyle The judgment of the + getComputedStyle , you can achieve compatibility with all major browsers. And the compatible writing is not complicated. Have you got it? ^_^
support currentStyle : IE , Opera
support getComputedStyle : FireFox , Chrome , Safari
Notice what pops up at the end, currentStyle Returns the browser's default value." auto ", getComputedStyle Then return the specific value" **px ". This should be both 1 Small differences, interested in children's shoes can be 1 Let's do some research on communication.
*/
window.onload = function(){
var odiv = document.getElementById('odiv');
odiv.onmouseover = function(){
startMov(this);
};
function startMov(obj){
setInterval(function(){
obj.style.width = parseInt(getStyle(obj,'width'))+1+'px';
obj.style.fontSize = parseInt(getStyle(obj,'fontSize'))+1+'px';
},30);
}
function getStyle(obj,attr)
{
if(obj.currentStyle){
return obj.currentStyle[attr];
}
else{
return getComputedStyle(obj,false)[attr];
}
}
}
//offsetWidth Gets the actual width of the element (both the border and the padding)
// As long as there are multiple objects moving, all properties cannot be Shared
</script>
6. Multi-object complex animation
Multi-object complex animation can control the change of different attributes of elements to achieve the animation effect
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> Multi-object complex animation </title>
<style type="text/css">
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,tr,td {margin:0;padding:0; font-size:12px;}
table {border-collapse:collapse;border-spacing:0;}
fieldset,img {border:0}
address,caption,cite,code,dfn,em,strong,th,var {font-style:normal;font-weight:normal}
ol,ul {list-style:none}
caption,th,td{text-align:center}
h1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:normal}
q:before,q:after {content:''}
abbr,acronym { border:0}
.odiv{position:relative;}
.odiv ul li{width:200px; height:100px; background:yellow; margin-bottom:20px; border:2px solid #000;}
</style>
</head>
<body>
<div id="odiv" class="odiv">
<ul>
<li id="li1"></li>
<li id="li2"></li>
</ul>
</div>
</body>
</html>
<script language="javascript">
window.onload = function(){
var li1 = document.getElementById('li1');
var li2 = document.getElementById('li2');
li1.onmouseover = function(){
startMov(this,400,'width');
};
li1.onmouseout = function(){
startMov(this,200,'width');
};
li2.onmouseover = function(){
startMov(this,200,'height');
};
li2.onmouseout = function(){
startMov(this,100,'height');
};
function startMov(obj,itarget,attr){
clearInterval(obj.timer);// Clear the animation before executing it
obj.timer = setInterval(function(){
var icur = parseInt(getStyle(obj,attr));
var speed =0;
speed = (itarget - icur)/8;
speed = speed>0?Math.ceil(speed):Math.floor(speed);
if(icur == itarget){
clearInterval(obj.timer);
}
else{
obj.style[attr] = icur+speed+'px';
}
},30);
}
function getStyle(obj,attr)
{
if(obj.currentStyle){
return obj.currentStyle[attr];
}
else{
return getComputedStyle(obj,false)[attr];
}
}
}
//offsetWidth Gets the actual width of the element (both the border and the padding)
// As long as there are multiple objects moving, all properties cannot be Shared
</script>
7. Multi-object complex animation (with transparency)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> Multi-object complex animation ( Diapronic )</title>
<style type="text/css">
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,tr,td {margin:0;padding:0; font-size:12px;}
table {border-collapse:collapse;border-spacing:0;}
fieldset,img {border:0}
address,caption,cite,code,dfn,em,strong,th,var {font-style:normal;font-weight:normal}
ol,ul {list-style:none}
caption,th,td{text-align:center}
h1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:normal}
q:before,q:after {content:''}
abbr,acronym { border:0}
.odiv{position:relative;}
.odiv ul li{width:200px; height:100px; background:yellow; margin-bottom:20px; border:2px solid #000;}
#li1{opacity:0.3;filter:alpha(opacity:30);}
</style>
</head>
<body>
<div id="odiv" class="odiv">
<ul>
<li id="li1"></li>
<li id="li2"></li>
</ul>
</div>
</body>
</html>
<script language="javascript">
window.onload = function(){
var li1 = document.getElementById('li1');
var li2 = document.getElementById('li2');
li1.onmouseover = function(){
startMov(this,100,'opacity');
};
li1.onmouseout = function(){
startMov(this,30,'opacity');
};
li2.onmouseover = function(){
startMov(this,200,'height');
};
li2.onmouseout = function(){
startMov(this,100,'height');
}
li1.timer = null;
li2.timer = null;
function startMov(obj,itarget,attr){
clearInterval(obj.timer);// Clear the animation before executing it
obj.timer = setInterval(function(){
var icur = 0;
if(attr == 'opacity'){
icur = Math.round(parseFloat(getStyle(obj,attr))*100);// Convert to integer , and 4 Give up 5 Under the
// Computers are often inaccurate when calculating decimals!
}
else{
icur = parseInt(getStyle(obj,attr));
}
var speed =0;
speed = (itarget - icur)/8;
speed = speed>0?Math.ceil(speed):Math.floor(speed);
if(icur == itarget){
clearInterval(obj.timer);
}
else{
if(attr == 'opacity'){
obj.style.filter = 'alpha(opacity:'+(icur+speed)+')';
obj.style.opacity = (icur+speed)/100;
}
else{
obj.style[attr] = icur+speed+'px';
}
}
},30);
}
function getStyle(obj,attr)
{
if(obj.currentStyle){
return obj.currentStyle[attr];
}
else{
return getComputedStyle(obj,false)[attr];
}
}
}
//offsetWidth Gets the actual width of the element (both the border and the padding)
// As long as there are multiple objects moving, all properties cannot be Shared
</script>
8. Chain animation
Chain animation is the execution of the current animation after the completion of the next animation effect
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> Chain animation </title>
<style type="text/css">
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,tr,td {margin:0;padding:0; font-size:12px;}
table {border-collapse:collapse;border-spacing:0;}
fieldset,img {border:0}
address,caption,cite,code,dfn,em,strong,th,var {font-style:normal;font-weight:normal}
ol,ul {list-style:none}
caption,th,td{text-align:center}
h1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:normal}
q:before,q:after {content:''}
abbr,acronym { border:0}
.odiv{position:relative;}
.odiv ul li{width:200px; height:100px; background:yellow; margin-bottom:20px; border:2px solid #000;}
#li1{opacity:0.3;filter:alpha(opacity:30);}
</style>
</head>
<body>
<div id="odiv" class="odiv">
<ul>
<li id="li1"></li>
</ul>
</div>
</body>
</html>
<script language="javascript">
window.onload = function(){
var li1 = document.getElementById('li1');
li1.onmouseover = function(){
startMov(li1,400,'width',function(){
startMov(li1,200,'height',function(){
startMov(li1,100,'opacity');
});
});
};
li1.onmouseout = function(){
startMov(li1,30,'opacity',function(){
startMov(li1,100,'height',function(){
startMov(li1,100,'width');
});
});
};
li1.timer = null;
function startMov(obj,itarget,attr,fn){//fn The callback function
clearInterval(obj.timer);// Clear the animation before executing it
obj.timer = setInterval(function(){
var icur = 0;
if(attr == 'opacity'){
icur = Math.round(parseFloat(getStyle(obj,attr))*100);// Convert to integer , and 4 Give up 5 Under the
// Computers are often inaccurate when calculating decimals!
}
else{
icur = parseInt(getStyle(obj,attr));
}
var speed =0;
speed = (itarget - icur)/8;
speed = speed>0?Math.ceil(speed):Math.floor(speed);
if(icur == itarget){
clearInterval(obj.timer);
if(fn){
fn();
}
}
else{
if(attr == 'opacity'){
obj.style.filter = 'alpha(opacity:'+(icur+speed)+')';
obj.style.opacity = (icur+speed)/100;
}
else{
obj.style[attr] = icur+speed+'px';
}
}
},30);
}
function getStyle(obj,attr)
{
if(obj.currentStyle){
return obj.currentStyle[attr];
}
else{
return getComputedStyle(obj,false)[attr];
}
}
}
//offsetWidth Gets the actual width of the element (both the border and the padding)
// As long as there are multiple objects moving, all properties cannot be Shared
</script>
9. Simultaneous motion animation of multiple objects (chain animation is supported)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> Motion animation of multiple objects simultaneously </title>
<style type="text/css">
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,tr,td {margin:0;padding:0; font-size:12px;}
table {border-collapse:collapse;border-spacing:0;}
fieldset,img {border:0}
address,caption,cite,code,dfn,em,strong,th,var {font-style:normal;font-weight:normal}
ol,ul {list-style:none}
caption,th,td{text-align:center}
h1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:normal}
q:before,q:after {content:''}
abbr,acronym { border:0}
.odiv{position:relative;}
.odiv ul li{width:200px; height:100px; background:yellow; margin-bottom:20px; border:2px solid #000;}
#li1{opacity:0.3;filter:alpha(opacity:30);}
</style>
</head>
<body>
<div id="odiv" class="odiv">
<ul>
<li id="li1"></li>
</ul>
</div>
</body>
</html>
<script language="javascript">
window.onload = function(){
var li1 = document.getElementById('li1');
li1.onmouseover = function(){
startMov(li1,{width:201,height:200,opacity:100});
};
li1.onmouseout = function(){
startMov(li1,{width:200,height:100,opacity:30});
};
li1.timer = null;
function startMov(obj,json,fn){//fn The callback function
clearInterval(obj.timer);// Clear the animation before executing it
var flag = true;// Whether the animation is complete
obj.timer = setInterval(function(){
for(var attr in json){
var icur = 0;
if(attr == 'opacity'){
icur = Math.round(parseFloat(getStyle(obj,attr))*100);// Convert to integer , and 4 Give up 5 Under the
// Computers are often inaccurate when calculating decimals!
}
else{
icur = parseInt(getStyle(obj,attr));
}
var speed =0;
speed = (json[attr] - icur)/8;
speed = speed>0?Math.ceil(speed):Math.floor(speed);
if(icur != json[attr]){
flag = false;
}
if(attr == 'opacity'){
obj.style.filter = 'alpha(opacity:'+(icur+speed)+')';
obj.style.opacity = (icur+speed)/100;
}
else{
obj.style[attr] = icur+speed+'px';
}
if(flag){
clearInterval(obj.timer);
if(fn){
fn();
}
}
}
},30);
}
function getStyle(obj,attr)
{
if(obj.currentStyle){
return obj.currentStyle[attr];
}
else{
return getComputedStyle(obj,false)[attr];
}
}
}
//offsetWidth Gets the actual width of the element (both the border and the padding)
// As long as there are multiple objects moving, all properties cannot be Shared
</script>
The last 1 animation effect to improve all the above animation code, their own can be extended according to the above code!
In fact, these 9 native js animation effects, have their own unique, each source can be directly copied and run, I hope to help you master js animation.