javascript元素透明度渐变效果代码实例

快乐打工仔 分类:实例代码

本章节分享一段代码实例,它实现了能够以渐变的方式设置元素的透明度。

代码实例如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<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>
网站出售中,有意者加微信:javadudu

回复

我来回复
  • 暂无回复内容