js物体运动-图标向上运动再从下方出现运动到原位置
2017-05-12 16:44
218 查看
<!DOCTYPE html> <html lang="en"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <head> <title>图标动画效果演示</title> <style> *{margin: 0;padding: 0;} #move{height:200px;width:300px;margin: 10px auto;background: #eee;border: 1px solid #ccc;} #move a{display:inline-block;height:25px;width:58px;background: #fff;margin: 10px 17px;border: 1px solid #ddd;border-radius: 3px;text-align: center;position: relative; padding-top:40px;color:#9c9c9c; 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;filter:alpha(opacity=100);opacity:1;} #move a:hover{color:#F00;} #move img{border:none;} </style> </head> <body> <div id="move"> <a href="#"><i><img src="images/food.png"/></i><p>食品</p></a> <a href="#"><i><img src="images/game.png"/></i><p>游戏</p></a> <a href="#"><i><img src="images/insurance.png"/></i><p>保险</p></a> <a href="#"><i><img src="images/lottery.png"/></i><p>日期</p></a> <a href="#"><i><img src="images/movie.png"/></i><p>电影</p></a> <a href="#"><i><img src="images/travel.png"/></i><p>旅行</p></a> </div> </body> </html>
<script type="text/javascript"> window.onload=function(){ var oMove=document.getElementById('move'); var aList=document.getElementsByTagName('a'); for (var i = 0; i < aList.length; i++) { aList[i].onmouseenter=function(){ var _this=this.getElementsByTagName('i')[0]; startMove(_this,{top:-25,opacity:0},function(){ _this.style.top=40+'px'; startMove(_this,{top:20,opacity:100}); }); }; }; }; function startMove(obj,json,fn){ clearInterval(obj.timer); obj.timer=setInterval(function(){ var flag=true;//假设都结束时为true for(var attr in json){ //取当前值 var icur=0; if(attr=='opacity'){ icur=Math.round(parseFloat(getStyle(obj,attr))*100); }else{ icur=parseInt(getStyle(obj,attr)); } //算速度 var speed=(json[attr]-icur)/10; speed=speed>0?Math.ceil(speed):Math.floor(speed); if(parseInt(icur)!=parseInt(json[attr])){ flag=false; } if(attr=='opacity'){ obj.style.filter='alpha(opacity:'+(icur+speed)+')'; obj.style.opacity=(icur+speed)/100; }else{ obj.style[attr]=icur+speed+"px"; } } if(flag){ clearInterval(obj.timer); if(fn){ fn(); } } },3); } function getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr]; //IE }else{ return getComputedStyle(obj,false)[attr]; //火狐 } } </script>
相关文章推荐
- 物体运动-jQuery-图标向上运动再从下方出现运动到原位置
- JS多物体 任意值 链式 缓冲运动
- js多物体运动框架
- win10通知信息出现的位置如何从顶部挪动到右下方底部
- js运动-多物体运动
- js运动-改变透明度(单物体)
- js 查找某个值在数组中出现的位置
- 让悬浮框在指定的位置出现(js)
- js实现多物体运动框架并兼容各浏览器
- js多物体任意值运动
- JS运动之多物体框架--多个div变宽
- js完美多物体运动框架(缓冲运动)
- [js]多个物体的运动
- JS实现多物体缓冲运动实例代码
- unity 2d鼠标拖动卡牌运动,发现鼠标与物体的实际运行位置不一致
- opencv 检测运动物体 例子时出现图像反转
- 点滴积累【JS】---JS小功能(JS实现多物体缓冲运动)
- 简单的JS多物体的运动---运动和透明度的变化
- 模拟真实物体运动的js动画库插件-Anima
- js动画2 多物体运动