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

最新推荐文章于 2020-11-02 18:28:47 发布

muzi187

最新推荐文章于 2020-11-02 18:28:47 发布

阅读量673

点赞数

分类专栏： html JavaScript css 文章标签： html js js运动 javascript 运动

本文链接：https://blog.csdn.net/muzi187/article/details/71747210

版权

html 同时被 3 个专栏收录

43 篇文章 0 订阅

订阅专栏

JavaScript

24 篇文章 0 订阅

订阅专栏

css

15 篇文章 0 订阅

订阅专栏

<!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.οnlοad=function(){
	var oMove=document.getElementById('move');
	var aList=document.getElementsByTagName('a');
	for (var i = 0; i < aList.length; i++) {
		aList[i].οnmοuseenter=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>

muzi187

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js物体运动-图标向上运动再从下方出现运动到原位置

图标动画效果演示*{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;margi
复制链接

扫一扫

专栏目录