js method to achieve multiple gradient effects on the same page

js method to achieve multiple gradient effects on the same page_javascript skills

WBOY

Release： 2016-05-16 16:04:53

Original

1153 people have browsed it

The example in this article describes how to implement multiple gradient effects on the same page using js. Share it with everyone for your reference. The specific analysis is as follows:

Here you can achieve the effect of any one of the 5 elements. When the mouse is moved up, the transparency gradually increases, and when the mouse is moved out, the transparency gradually decreases.

Point 1:

var speed = 0;
if(target>obj.alpha){
speed = 5;
}else{
speed = -5;
}

Copy after login

Determine whether the speed is positive or negative based on the comparison between the target value and the current value.

Point 2:

for(i=0; i<runs_li.length; i++){
runs_li[i].timer = null;
runs_li[i].alpha = 30;
runs_li[i].onmouseover = function(){
startrun(this,100);
}
runs_li[i].onmouseout = function(){
startrun(this,30);
}
}

Copy after login

Add its own transparency value to each element, and separate its transparency changes.

Finally, add the code:

<!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>无标题文档</title>
<style>
body,ul,li{margin:0; padding:0;}
#runs{width:300px; margin:10px auto;}
#runs li{width:80px; height:80px; background:#06c; list-style:none;
float:left; margin:10px; display:inline;
filter:alpha(opacity=30); opacity:0.3;}
</style>
<script>
window.onload = function(){
 var runs = document.getElementById("runs");
 var runs_li = runs.getElementsByTagName("li");
 var i=0; 
 for(i=0; i<runs_li.length; i++){
 runs_li[i].timer = null;
 runs_li[i].alpha = 30;
 runs_li[i].onmouseover = function(){
  startrun(this,100);
 }
 runs_li[i].onmouseout = function(){
  startrun(this,30);
 }
 }
}
function startrun(obj,target){
 clearInterval(obj.timer);
 obj.timer = setInterval(function(){
 var speed = 0;
 if(target>obj.alpha){
  speed = 5;
 }else{
  speed = -5;
 }
 
 if(obj.alpha == target){
  clearInterval(obj.timer);
 }else{
  obj.alpha = obj.alpha + speed;
  obj.style.filter = "alpha(opacity="+obj.alpha+")";
  obj.style.opacity = obj.alpha/100;
 }
 
 },30)
}
</script>
</head>
<body>
<ul id="runs">
 <li>1</li>
 <li>2</li>
 <li>3</li>
 <li>4</li>
 <li>5</li>
</ul>
</body>
</html>

Copy after login

I hope this article will be helpful to everyone’s JavaScript programming design.