Of Stack

js is a method of implementing multiple different motion effects on the same page

  • 2020-05-27 04:11:58
  • OfStack

The example in this article shows how js can achieve multiple different motion effects on the same page. Share with you for your reference. The specific analysis is as follows:

Point 1: 


function getstyle(obj,name){
if(obj.currentStyle){
return obj.currentStyle[name];
}else{
return getComputedStyle(obj,false)[name];
}
}

Value from the stylesheet by id and the property name.

Point 2: 


if(attr == "opacity"){
cur = Math.round(parseFloat(getstyle(obj,attr))*100);
}else{
cur = parseInt(getstyle(obj,attr));
}

If you're setting the transparency value, you might want to use parseFloat because you might have a decimal point, and then you might have a decimal point, and you're going to use round to round off 4 from 5.

If the opacity value is set, parseInt can be used to take only the numeric part

Other points of attention have been mentioned in the previous articles, so they will not be repeated here.

Finally, add the code: 


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> Headless 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>
window.onload = function(){
 var runs = document.getElementById("runs");
 var runs_li = runs.getElementsByTagName("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(obj.timer);
 obj.timer = setInterval(function(){
 var cur = 0;
 if(attr == "opacity"){
  cur = Math.round(parseFloat(getstyle(obj,attr))*100);
 }else{
  cur = parseInt(getstyle(obj,attr));
 }
 var speed = (target - cur)/8;
 speed = speed>0?Math.ceil(speed):Math.floor(speed);
  
  if(cur == target){
   clearInterval(obj.timer);
  }else{
   if(attr == "opacity"){
    obj.style.filter='alpha(opacity='+(cur+speed)+')';
    obj.style.opacity=(cur+speed)/100;
   }else{
    obj.style[attr] = cur+speed+"px";
   }
  }
 },30);
}
function getstyle(obj,name){
 if(obj.currentStyle){
  return obj.currentStyle[name];
 }else{
  return getComputedStyle(obj,false)[name];
 }
}
</script>
</head>
<body>
<ul id="runs">
 <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 has helped you with the javascript programming.

Related articles: