完美运动框架

最新推荐文章于 2020-07-09 12:36:19 发布

请叫我二狗哥

最新推荐文章于 2020-07-09 12:36:19 发布

阅读量150

点赞数

分类专栏： Javascript 基础案例

cnblog博客：https://www.cnblogs.com/f6056/

本文链接：https://blog.csdn.net/weimob258616/article/details/82803584

版权

Javascript 同时被 2 个专栏收录

57 篇文章 3 订阅

订阅专栏

基础案例

39 篇文章 1 订阅

订阅专栏

//完美运动框架
function getStyle(obj,name)
{
	if(getComputedStyle(obj,null)[name])
	{
		return getComputedStyle(obj,null)[name];
					//fireFox、chrome
	}
	else
	{
		return obj.currentStyle[name];
			//IE
	}
}

function getByClass(oParent,sClass)
{
	var aEle=oParent.getElementsByTagName('*');
	var aResult=[];
	for(var i=0;i<aEle.length;i++)
	{
		if(aEle[i].className==sClass)
		{
			aResult.push(aEle[i]);
		}
	}
	return aResult;
}


function startMove(obj,json,fnEnd)
{
 
	clearInterval(obj.timer);
 
	obj.timer=setInterval(function(){
		
		var bStop=true; //假设所有值均已达到
		
		for(var attr in json)
		{
			var cur=0;
			if(attr=="opacity")
			{
				cur=Math.round(parseFloat(getStyle(obj,attr))*100);
			}
			else
			{
				cur=parseInt(getStyle(obj,attr));
			}
			
			var speed=(json[attr]-cur)/30;
			
			speed=speed>0?Math.ceil(speed):Math.floor(speed);
			
			if(cur!=json[attr])
			{
				bStop=false;
			}

			if(attr=="opacity")
			{
				cur+=speed;
				obj.style.fliter='alpha(opacity:'+cur+')';
				obj.style.opacity=cur/100;
			}
			else
			{
				obj.style[attr]=cur+speed+'px';
			}
		}
		if(bStop)
		{
			clearInterval(obj.timer);
			if(fnEnd)fnEnd();
		}
	},30)
}

完美运动框架实例

<!doctype html>
<html>
<head>
<title>运动</title>
<meta charset="utf-8">
<style>
.div1{width:100px;height:100px;float:left;background:#ccc;margin:5px;opacity:0.6;filter:alpha(opacity=60);}
</style>
<script src='move2 - 副本.js'></script>
<script>

window.onload=function()
{
	var oDiv0=document.getElementsByClassName('div1')[0];
	oDiv0.onmouseover=function()
	{
		startMove(oDiv0,{"width":300,"height":150,"font-size":300});
	}
	oDiv0.onmouseout=function()
	{
		startMove(oDiv0,{"width":100,"height":100,"font-size":16});
	}
}
</script>
</head>
<body>
<div class="div1">0</div>
<div class="div1">1</div>
<div class="div1">2</div>
<div class="div1">3</div>
<div class="div1">4</div>
<div class="div1">5</div>
<div class="div1">6</div>
<div class="div1">7</div>
<div class="div1">8</div>
<div class="div1">9</div>
<div class="div1">10</div>
<div class="div1">11</div>
<div class="div1">12</div>
<div class="div1">13</div>
<div class="div1">14</div>
</body>
</html>

请叫我二狗哥

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
完美运动框架

//完美运动框架function getStyle(obj,name){ if(getComputedStyle(obj,null)[name]) { return getComputedStyle(obj,null)[name]; //fireFox、chrome } else { return obj.currentStyle[name]; //IE ...
复制链接

扫一扫