-
封闭式函数：执行类似淘宝跳上去又掉下来的效果 function getstyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr]; }else{ return getComputedStyle(obj,false)[attr]; } } var alpha=30; function move(obj,json,fn){ clearInterval(obj.timer); obj.timer=setInterval(function(){ var flag=true; for(var attr in json){ var curr=0; if(attr=="opacity"){ curr = Math.round(parseFloat(getstyle(obj,attr))*100); }else{ curr=parseInt(getstyle(obj,attr)); } //算速度 var speed=(json[attr]-curr)/8; speed=speed>0?Math.ceil(speed):Math.floor(speed); //检测停止 if(curr!=json[attr]){ flag=false; } if(attr=="opacity"){ obj.style.filter="alpha(opacity:"+(curr+speed)+")"; obj.style.opacity=(curr+speed)/100; }else{ obj.style[attr]=curr+speed+"px"; } } if(flag){ clearInterval(obj.timer); if(fn){ fn(); } } },30) }查看全部
-
向上跑再掉下来的页面：查看全部
-
类似淘宝向上跑再掉下来 div id="move"> <a href="#"><i><img src="img/badge-circle-direction-right.png"/></i><p>彩票</p></a> <a href="#"><i><img src="img/badge-square-check.png"/></i><p>电影</p></a> <a href="#"><i><img src="img/badge-square-direction-down.png"/></i><p>音乐</p></a> <a href="#"><i><img src="img/circle-glass.png"/></i><p>缴费</p></a> </div>查看全部
-
*{padding:0; margin:0;} #move { padding: 10px; width: 300px; background: #f4f4f4; border: 1px solid #ccc; margin: 10px auto; } #move a{display:inline-block; width:58px; height:25px; background:#fff; border:1px solid #f00; border-radius:3px; text-align:center; margin:10px 17px; position:relative; padding-top:40px; color:#c9c9c9; font-size:12px; text-decoration:none; line-height:25px; overflow:hidden;} #move a i{position:absolute; top:20px; left:0; display:inline-block; width:100%; text-align:center; opacity:1; filter:alpha(opacity=100); } #move a:hover{color:#f00;} #move img{border:none;} </style> <script src="move.js"></script>查看全部
-
最后尾查看全部
-
重点额查看全部
-
重点：查看全部
-
最终版 function getstyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr]; }else{ return getComputedStyle(obj,false)[attr]; } } var alpha=30; function move(obj,json,fn){ var flag=true;//假设 clearInterval(obj.timer); obj.timer=setInterval(function(){ for(var attr in json){ //取当前值 var curr=0; if(attr=="opacity"){ curr = Math.round(parseFloat(getstyle(obj,attr))*100); }else{ curr=parseInt(getstyle(obj,attr)); } //算速度 var speed=(json[attr]-curr)/8; speed=speed>0?Math.ceil(speed):Math.floor(speed); //检测停止 if(curr!=json[attr]){ flag=false; } if(attr=="opacity"){ obj.style.filter="alpha(opacity:"+(curr+speed)+")"; obj.style.opacity=(curr+speed)/100; }else{ obj.style[attr]=curr+speed+"px"; } } if(flag){ clearInterval(obj.timer); if(fn){ fn(); } } },30) }查看全部
-
前段同步运动： <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> ul li{list-style:none;} li{width:200px; height:100px; background-color:yellow; margin-bottom:20px; border:2px solid #0f0; opacity:0.3; filter:alpha(opacity:30); } </style> <script src="test.js"></script> <script type="text/javascript"> window.onload=function(){ var ali=document.getElementById("li1"); ali.onmousemove=function(){ move(ali,{width:300,height:300}); } } //var json={a:1,b:2}; </script> </head> <body> <ul> <li id="li1"></li> </ul> </body>查看全部
-
function getstyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr]; }else{ return getComputedStyle(obj,false)[attr]; } } var alpha=30; function move(obj,json,fn){ clearInterval(obj.timer); obj.timer=setInterval(function(){ for(var attr in json){ var curr=0; if(attr=="opacity"){ curr = Math.round(parseFloat(getstyle(obj,attr))*100); }else{ curr=parseInt(getstyle(obj,attr)); } //算速度 var speed=(json[attr]-curr)/8; speed=speed>0?Math.ceil(speed):Math.floor(speed); //检测停止 if(curr==json[attr]){ clearInterval(obj.timer); if(fn){ fn(); } }else{ if(attr=="opacity"){ obj.style.filter="alpha(opacity:"+(curr+speed)+")"; obj.style.opacity=(curr+speed)/100; }else{ obj.style[attr]=curr+speed+"px"; } } } },30) }查看全部
-
上部分查看全部
-
多物体运动，所有东西都不能公用查看全部
-
引入部分js var alpha=30; function move(obj,attr,target,fn){ clearInterval(obj.timer); obj.timer=setInterval(function(){ var curr=0; if(attr=="opacity"){ curr = Math.round(parseFloat(getstyle(obj,attr))*100); }else{ curr=parseInt(getstyle(obj,attr)); } //算速度 var speed=(target-curr)/8; speed=speed>0?Math.ceil(speed):Math.floor(speed); //检测停止 if(curr==target){ clearInterval(obj.timer); if(fn){ fn(); } }else{ if(attr=="opacity"){ obj.style.filter="alpha(opacity:"+(curr+speed)+")"; obj.style.opacity=(curr+speed)/100; }else{ obj.style[attr]=curr+speed+"px"; } } },30) }查看全部
-
综合让物体先宽后高在透明度 ul li{list-style:none;} li{width:200px; height:100px; background-color:yellow; margin-bottom:20px; border:2px solid #0f0; opacity:0.3; filter:alpha(opacity:30); } window.onload=function(){ var li=document.getElementById("li1"); li.onmouseover=function(){ move(li,"width",300,function(){ move(li,"height",300,function(){ move(li,"opacity",100); }) }); } } <ul> <li id="li1">1</li> </ul> unction getstyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr]; }else{ return getComputedStyle(obj,false)[attr]; } }查看全部
-
边宽-变高-透明度查看全部
举报
0/150
提交
取消