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