js物体运动-图标向上运动再从下方出现运动到原位置

来源：互联网发布：网络课程网站编辑：程序博客网时间：2024/05/29 04:34

<!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;//假设都结束时为truefor(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>

0 0