This article describes how js can achieve multiple different motion effects on the same page. Share it for your reference. The specific analysis is as follows:
Key Point 1:
function getstyle(obj,name){
if(){
return [name];
}else{
return getComputedStyle(obj,false)[name];
}
}
Take values from the stylesheet based on id and attribute name.
Point 2:
if(attr == "opacity"){
cur = (parseFloat(getstyle(obj,attr))*100);
}else{
cur = parseInt(getstyle(obj,attr));
}
If you set the value of transparency, because it may be a decimal point, you need to use parseFloat, and then there may be decimals, and round it with the round method.
If the non-transparency value is set, use parseInt, you can only take the numerical part
Other points of note are mentioned in the previous articles, and will not be discussed here.
Finally, the code above:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Untitled document</title>
<style>
body,ul,li{margin:0; padding:0;}
#runs li{width:80px; height:80px; background:#06c;
list-style:none; margin:10px; border:1px solid #000;
filter:alpha(opacity=30); opacity:0.3;}
</style>
<script>
= function(){
var runs = ("runs");
var runs_li = ("li");
runs_li[0].onmouseover = function(){
startrun(this,"width",300);
}
runs_li[0].onmouseout = function(){
startrun(this,"width",80);
}
runs_li[1].onmouseover = function(){
startrun(this,"height",300);
}
runs_li[1].onmouseout = function(){
startrun(this,"height",80);
}
runs_li[2].onmouseover = function(){
startrun(this,"fontSize",50);
}
runs_li[2].onmouseout = function(){
startrun(this,"fontSize",14);
}
runs_li[3].onmouseover = function(){
startrun(this,"opacity",100);
}
runs_li[3].onmouseout = function(){
startrun(this,"opacity",30);
}
}
function startrun(obj,attr,target){
clearInterval();
= setInterval(function(){
var cur = 0;
if(attr == "opacity"){
cur = (parseFloat(getstyle(obj,attr))*100);
}else{
cur = parseInt(getstyle(obj,attr));
}
var speed = (target - cur)/8;
speed = speed>0?(speed):(speed);
if(cur == target){
clearInterval();
}else{
if(attr == "opacity"){
='alpha(opacity='+(cur+speed)+')';
=(cur+speed)/100;
}else{
[attr] = cur+speed+"px";
}
}
},30);
}
function getstyle(obj,name){
if(){
return [name];
}else{
return getComputedStyle(obj,false)[name];
}
}
</script>
</head>
<body>
<ul >
<li style="top:0">1</li>
<li style="top:90px;">2</li>
<li style="top:180px;">3</li>
<li style="top:270px;">4</li>
</ul>
</body>
</html>
I hope this article will be helpful to everyone's JavaScript programming.