JavaScript渐变效果的实现

浏览数：17 / 时间：2015年06月08日

鼠标移上去透明度渐渐增加，鼠标移出，透明度渐渐减小。

1
var speed = 0;

2
if(target>obj.alpha){

3
    speed = 5;

4
}else{

5
    speed = -5;

6
}

根据目标值和当时值的对比，来决定是正向还是负向速度。

01
for(i=0; i < runs_li.length; i++){

02
    runs_li[i].timer = null;

03
    runs_li[i].alpha = 30;

04
    runs_li[i].onmouseover = function(){

05
        startrun(this,100);

06
    }

07
    runs_li[i].onmouseout = function(){

08
        startrun(this,30);

09
    }

10
}

给每一个元素加上各自的透明度值，各自的透明度变化分开。

全部代码：

01
<style>

02
#runs{width:300px; margin:10px auto;}

03
#runs li{width:80px; height:80px; background:#06c; list-style:none; float:left; margin:10px; display:inline; filter:alpha(opacity=30); opacity:0.3;}

04
</style>

05
<script>

06
window.onload = function(){

07
  var runs = document.getElementById("runs");

08
  var runs_li = runs.getElementsByTagName("li");

09
  var i=0; 

10
  for(i=0; i<runs_li.length; i++){

11
    runs_li[i].timer = null;

12
    runs_li[i].alpha = 30;

13
    runs_li[i].onmouseover = function(){

14
      startrun(this,100);

15
    }

16
    runs_li[i].onmouseout = function(){

17
      startrun(this,30);

18
    }

19
  }

20
}

21
 
22
function startrun(obj,target){

23
  clearInterval(obj.timer);

24
  obj.timer = setInterval(function(){

25
    var speed = 0;

26
    if(target>obj.alpha){

27
      speed = 5;

28
    }else{

29
      speed = -5;

30
    }

31
    
32
    if(obj.alpha == target){

33
      clearInterval(obj.timer);

34
    }else{

35
      obj.alpha = obj.alpha + speed;

36
      obj.style.filter = "alpha(opacity="+obj.alpha+")";

37
      obj.style.opacity = obj.alpha/100;

38
    }

39
  
40
  },30)

41
}

42
 
43
</script>

44
 
45
<ul id="runs">

46
  <li>简</li>

47
  <li>明</li>

48
  <li>现</li>

49
  <li>代</li>

50
  <li>魔</li>

51
  <li>法</li>

52
</ul>