Implementation of JavaScript gradient effect

Let's take a look at the demo:

• Simplified
• Ming
• Now
• Generation
• Magic
• Method

The transparency of the above elements increases gradually when the mouse moves up, while the transparency decreases gradually when the mouse moves out.

Key code:

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

Based on the comparison between the target value and the current value, it is determined whether the speed is positive or negative.

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);}}

Each element is added with its own transparency value, and their respective transparency changes are separated.

All code:

<Style> # 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> <ul id = "runs"> <li> simplified </li> <li> Ming </li> <li> current </li> <li> generation </li> <li> magic </li> <li> method </li> </ul>