慕課網首頁
免費課
實戰(zhàn)課
體系課
發(fā)現(xiàn)
評價教程專欄手記
商業(yè)合作
企業(yè)服務講師入駐

                        課程
                    
                        /前端開發(fā)
                        
                            /JavaScript
                        
                        /JS動畫效果

為什么我的只有在調‘opacity’的時候有用?。?/h1>

<!DOCTYPE?html>
<html>
<head>
????<meta?charset="UTF-8">
????<title>Title</title>
????<style>
????????*{
????????????margin:0;
????????????padding:0;
????????}
????????ul{
????????????list-style:?none;
????????}
????????ul?li{
????????????width:200px;
????????????height:?80px;
????????????background:?red;
????????????margin-bottom:?20px;
????????????border:?4px?solid?black;
????????????opacity:?0.3;
????????????filter:?alpha(opacity:30);
????????}
????</style>
????<script>
????????window.onload=function(){
????????????var?Li?=?document.getElementsByTagName("li")[0];
????????????????Li.onmouseover?=?function(){
????????????????????startMove(this,'height',200);
????????????????};
????????????????Li.onmouseout?=?function(){
????????????????????startMove(this,'height',80);
????????????????};

????????????var?timer?=?null;
?
????????????function?startMove(obj,attr,target){
????????????????????clearInterval(timer);
????????????????????timer?=?setInterval(function(){
????????????????????var?icur?=?0;
????????????????????????if(attr?==?'opacity'){
????????????????????????????icur?=?parseFloat(getStyle(obj,attr))*100;
????????????????????????}else{
????????????????????????????icur?=?parseInt(getStyle(obj,attr));
????????????????????????}
?
????????????????????var?speed?=?(target?-?icur)/8;
????????????????????????speed?=?speed?>?0???Math.ceil(speed)?:?Math.floor(speed);
????????????????????if(icur?==?target){
????????????????????????clearInterval(timer);
????????????????????}
????????????????????else{
????????????????????????if(attr?==?'opacity'){
????????????????????????????obj.style.filter?=?'alpha(opacity:'+?(icur?+?speed)+')';
????????????????????????????obj.style.opacity?=?(icur?+?speed)/100?;
????????????????????????}else?{
????????????????????????????obj.style.attr?=?icur?+?speed?+?"px";
????????????????????????}
?
????????????????????}
????????????????},30)
?
????????????}
????????????function?getStyle(obj,attr){
????????????????if(obj.currentStyle){
????????????????????return?obj.currentStyle[attr];
????????????????}else{
????????????????????return?getComputedStyle(obj,false)[attr];
????????????????}
????????????}
?
????????}
????</script>
</head>
<body>
<ul>
????<li></li>?
</ul>
</body>
</html>