<!DOCTYPE?html>
<html>
<head>
?<meta?charset="UTF-8">
?<title>完美框架</title>
?<style?type="text/css">
??body,ul{
???margin:?0px;
???padding:?0px;
??}
??ul,li{
???list-style:?none;
??}
??ul?li{???width:?200px;
???height:?100px;
???float:left;
???background:?red;
???margin-right:?20px;
???opacity:?0.3;
??}
?</style>
?<script?type="text/javascript">
?window.onload=function(){
??var?aLi?=document.getElementsByTagName('li');
??for?(var?i?=?aLi.length?-?1;?i?>=?0;?i--)?{
????aLi[i].timer=null;
????aLi[i].alpha=0.3;
???aLi[i].onmouseover=function(){
?????????????????startMove(this,1.0);
???}
???aLi[i].onmouseout=function(){
?????startMove(this,0.3);
???}??}
??}
??//var?timer=null;
??function?startMove(obj,iTarget){
???clearInterval(obj.timer);
???var?speed=iTarget-obj.alpha;
???obj.timer=setInterval(function(){
???????
????????????????speed=speed>0?0.1:-0.1;?
????
???if?(iTarget==obj.alpha)?{
????clearInterval(obj.timer);
???}else{????obj.alpha+=speed;
????obj.style.opacity=obj.alpha;
???}?
???},30);
???
??}
?</script>
</head>
<body>
?<ul>
??<li></li>
??<li></li>
??<li></li>
?</ul>
</body>
</html>
2016-12-11
這樣就可以了，
<!DOCTYPE html>
<html>
<head>
?<meta charset="UTF-8">
?<title>完美框架</title>
?<style type="text/css">
? body,ul{
?? margin: 0px;
?? padding: 0px;
? }
? ul,li{
?? list-style: none;
? }
? ul li{?? width: 200px;
?? height: 100px;
?? float:left;
?? background: red;
?? margin-right: 20px;
?? filter:alpha(opacity:30);
?? opacity: 0.3;
? }
?</style>
?<script type="text/javascript">
?window.onload=function(){
? var aLi =document.getElementsByTagName('li');
? for (var i = aLi.length - 1; i >= 0; i--) {
??? aLi[i].timer=null;
??? aLi[i].alpha=30;
?? aLi[i].onmouseover=function(){
???? startMove(this,100);
?? }
?? aLi[i].onmouseout=function(){
???? startMove(this,30);
?? }? }
? }
? function startMove(obj,iTarget){
?? clearInterval(obj.timer);
? ? var? speed=iTarget-obj.alpha;?? obj.timer=setInterval(function(){
?????????? speed=speed>0?10:-10; ??
?? if (iTarget==obj.alpha) {
??? clearInterval(obj.timer);
?? }else{??? obj.alpha+=speed;
??? obj.style.filter='alpha(opacity:'+obj.alpha+')';
?? ?obj.style.opacity=obj.alpha/100;
?? }
?? },30);
?? ?
? }
?</script>
</head>
<body>
?<ul>
? <li></li>
? <li></li>
? <li></li>
?</ul>
</body>
</html>