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

如何將更改透明度和變換高度同時(shí)作用在\多物體運(yùn)動\上，求各位大神幫幫忙，看我哪里錯(cuò)了

請問JS部分應(yīng)該怎么改？

superli18

2016-09-25

源自：JS動畫效果 4-1

關(guān)注問題我要回答

592

操作

收起

4 回答

半桶水的好人
2016-11-04

<!doctype html>
<html>
?<head>
? <meta charset="UTF-8">
? <meta name="Generator" content="EditPlus?">
? <meta name="Author" content="">
? <meta name="Keywords" content="">
? <meta name="Description" content="">
? <title>Document</title>
? <style type="text/css">
?? ? * {
?? ??? ?margin:0;
?? ??? ?padding:0;
?? ?}
?? ? ul li{
?? ??? ?width:200px;
?? ??? ?height:100px;
?? ??? ?background:yellow;
?? ??? ?list-style:none;
?? ??? ?margin-top:20px;
?? ??? ?filter:alpha(opacity:30);
?? ??? ?opacity:0.3;
?? ?}
? </style>
? <script type="text/javascript">
?? ?window.onload=function(){
?? ??? ?var lis=document.getElementsByTagName("li");
?? ??? ?//var timer=null;
?? ??? ?for(var i=0;i<lis.length;i++){
?? ??? ??? ?lis[i].alpha=30;
?? ??? ??? ?lis[i].timer=null;
?? ??? ??? ?lis[i].onmouseover=function(){
?? ??? ??? ??? ?showMove(this,400,100);
?? ??? ??? ?}
?? ??? ??? ?lis[i].onmouseout=function(){
?? ??? ??? ??? ?showMove(this,200,30);
?? ??? ??? ?}
?? ??? ?}
?? ??? ?function showMove(obj,target1,target2){
?? ??? ??? ?clearInterval(obj.timer);
?? ??? ??? ?obj.timer=setInterval(function(){
?? ??? ??? ??? ?var sheed=(target1-obj.offsetWidth)/10;
?? ??? ??? ??? ?if(sheed>0){
?? ??? ??? ??? ??? ?sheed=Math.ceil(sheed);
?? ??? ??? ??? ?}else {
?? ??? ??? ??? ??? ?sheed=Math.floor(sheed);
?? ??? ??? ??? ?}
?? ??? ??? ??? ?var sheed2=0;
?? ??? ??? ??? ?if(obj.alpha>target2){
?? ??? ??? ??? ??? ?sheed2=-5;
?? ??? ??? ??? ?}else{
?? ??? ??? ??? ??? ?sheed2=5
?? ??? ??? ??? ?}
?? ??? ??? ??? ?if(obj.alpha == target2 && target1 == obj.offsetWidth){
?? ??? ??? ??? ??? ?clearInterval(obj.timer);
?? ??? ??? ??? ?}else{
?? ??? ??? ??? ??? ?obj.alpha+=sheed2;
?? ??? ??? ??? ??? ?obj.style.filter="alpha(opacity:"+obj.alpha+")";
?? ??? ??? ??? ??? ?obj.style.opacity=obj.alpha/100;
?? ??? ??? ??? ??? ?obj.style.width=obj.offsetWidth+sheed+"px";
?? ??? ??? ??? ?}
?? ??? ??? ?},30)
?? ??? ?}
?? ?}
? </script>
?</head>
?<body>
? <ul>
?? ?<li></li>
?? ?<li></li>
?? ?<li></li>
? </ul>
?</body>
</html>