Home > Article > Web Front-end > js method to achieve transparency gradient effect_javascript skills

js method to achieve transparency gradient effect_javascript skills

WBOYOriginal: 2016-05-16 16:05:061716browse

The example in this article describes how to achieve transparency gradient effect in js. Share it with everyone for your reference. The specific analysis is as follows:

Here you can realize that the transparency of the element is 30 at the beginning. When the mouse is moved over, the transparency slowly increases and stops when the transparency reaches 100. As the mouse moves out, the transparency slowly decreases to 30.

Point 1: Because the transparency value cannot be obtained and changed directly, you can assign the transparency value to a variable, let the variable change, and finally assign the variable value to the element's transparency value.

var alpha=30;

Point 2: Judge the target value and the current transparency value to determine whether it is positive speed or negative speed.

if(target > alpha){
speed = 2;
}else{
speed = -2;
}

Point 3: If the transparency value reaches the target value, turn off the timer, otherwise the transparency value will continue to change. Finally, the value is assigned to the element. Because transparency has compatibility issues, two writing methods are required.

if(alpha == target){
clearInterval(timer);
}
else{
alpha = alpha + speed;
run.style.filter = 'alpha(opacity='+alpha+')';
run.style.opacity = alpha/100;
document.title = alpha;
}

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{margin:0; padding:0;}
#run{width:100px; height:100px; background:#06c;
position:absolute; border:1px solid #000;
opacity:0.3; filter:alpha(opacity=30);}
</style>
<script>
window.onload = function(){
 var run = document.getElementById("run");
 var btn = document.getElementById("btn");
 var speed = 1;
 var timer = null;
 var alpha=30;
 run.onmouseover = function(){
  startrun(100);
 }
 run.onmouseout = function(){
  startrun(30);
 }
 function startrun(target){
  clearInterval(timer);
  timer = setInterval(function(){
   if(target > alpha){
    speed = 2;
   }else{
    speed = -2;
   }
   if(alpha == target){
    clearInterval(timer);
   }
   else{
    alpha = alpha + speed;
    run.style.filter = 'alpha(opacity='+alpha+')';
    run.style.opacity = alpha/100;
    document.title = alpha;
   }
  },30)
 }
}
</script>
</head>
<body>
<div id="run"></div>
</body>
</html>

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

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：js simple click return to top effect implementation method_javascript skillsNext article：js simple click return to top effect implementation method_javascript skills

See more

js method to achieve transparency gradient effect_javascript skills

Related articles