纯JS实现透明动画二之鼠标移出和移进，改变透明过渡效果。
主要是利用JS的时间函数去实现的，
setinterval 和
settimeout
不过此类方法容易造成时间点冲突，大家慎用，一定要耐心检查。
|
<!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 type="text/css">
*{ margin:0px; padding:0px;}
ul,li{ display:block; list-style:none;}
.ul_1 li{ height:300px; width:300px; margin-top:5px; margin-left:10px; float:left; background:#00F; line-height:25px; color:#fff; opacity:0.3; filter:Alpha(opacity=30);}
</style>
</head>
<body>
<ul class="ul_1">
<li>sss</li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<script>
window.onload = function(){
var ul_1 = document.getElementsByTagName('ul')[0];
var li = ul_1.getElementsByTagName('li');
//var opcity = new Array();
for(i=0;i<li.length;i++){
li[i].opcity = 30;//初始化透明度
li[i].times = null;
li[i].onmouseover = function(e){
clearInterval(this.times);
start_obcity(this,100);
}
li[i].onmouseout = function(e){
clearInterval(this.times);
start_obcity(this,30);
}
}
}
function start_obcity(obj,opcity){
obj.times = setInterval(function(){
if(obj.opcity == opcity){
clearInterval(obj.times);
}else{
if(obj.opcity>opcity){
alpha = obj.opcity-=10;
}else{
alpha = obj.opcity+=10;
}
obj.style.filter = 'alpha(opacity:'+alpha+')';
obj.style.opacity = alpha/100;
}
},30);
}
</script>
</body>
</html>
|
