js method to achieve transparency gradient effect_javascript skills-JS Tutorial-php.cn

js method to achieve transparency gradient effect_javascript skills

WBOY

Release： 2016-05-16 16:05:06

Original

1755 people have browsed it

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;

Copy after login

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

Copy after login

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

Copy after login

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>

Copy after login

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