javascript元素透明度漸變效果程式碼例項

admin發表於2017-04-05
JavaScript

本章節分享一段程式碼例項，它實現了能夠以漸變的方式設定元素的透明度。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<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 index=0; 
  for(index=0; index<runs_li.length; index++){
    runs_li[index].timer = null;
    runs_li[index].alpha = 30;
    runs_li[index].onmouseover = function(){
      startrun(this,100);
    }
    runs_li[index].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></li>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
</ul>
</body>
</html>

相關文章