完整的缓冲运动框架

最新推荐文章于 2018-03-13 19:59:06 发布

DB-Ruan

最新推荐文章于 2018-03-13 19:59:06 发布

阅读量403

点赞数

分类专栏： JavaScript 技术日志

本文链接：https://blog.csdn.net/feizhoujeep/article/details/38881479

版权

JavaScript 同时被 2 个专栏收录

25 篇文章 0 订阅

订阅专栏

技术日志

23 篇文章 0 订阅

订阅专栏

首先，之所以叫它完整的缓冲运动框架，是因为他不但能够完成各种元素属性的运动（包括opacity属性的操作），还解决了各种BUG。

BUG1：用getStyle(obj,attr,value)封装函数解决元素有BORDER情况下，要求元素变窄，可实际上变大的bug。

BUG2：当startMove(obj,attr,itarget)的attr属性为"opacity"的情况下，无法实现的问题。

<html>
	<head>
		<meta charset="utf-8"/>
		<title>完整的缓冲运动框架</title>
		<style>
			div{width:200px; height:200px; background:red; margin:20px; float:left; position:relative; top:0;left:0; opacity:0.3; filter:alpha(opacity=30);}
		</style>
		<script>
			window.οnlοad=function(){
				oDiv=document.getElementsByTagName("div");
				alert(getStyle(oDiv[0],"opacity"));//<span style="color:#ff0000;">通过IE和FF分别运行，弹出的OPACITY值均为0.3或者0.300001123,所以在确定运动之前要先乘以100，然后用Math.round这个方法取整。</span>
				for(var i=0;i<oDiv.length;i++){
					oDiv[i].timer=null;
					oDiv[i].alpha=30;
					oDiv[i].οnmοuseοver=function(){
						startMove(this,"opacity",100);
					}
					oDiv[i].οnmοuseοut=function(){
						startMove(this,"opacity",30);
					}
				}
			}
			function startMove(obj,attr,itarget){
				clearInterval(obj.timer);
				obj.timer=setInterval(function(){
				var cur=0;
				if(attr=="opacity"){
					cur=Math.round(parseFloat(getStyle(obj,attr))*100);
					//alert(cur);
				}
				else{
					cur=parseInt(getStyle(obj,attr));
				}
					var speed=(itarget-cur)/10;
					speed=speed>0?Math.ceil(speed):Math.floor(speed);
					if(cur==itarget){
						clearInterval(obj.timer);
					}
					else{
						if(attr=="opacity"){
							obj.style[attr]=(cur+speed)/100;
							obj.style.filter="alpha(opacity="+(cur+speed)+")";<span style="color:#ff0000;">//做的时候忘了给opacity变化了</span>
						}
						else{
							obj.style[attr]=cur+speed+"px";
						}
					}
				},30);
			}
			function getStyle(obj,attr,value){<span style="color:#ff0000;">//考虑到时封装函数，可以用到其他的地方，所以没有给取得的元素属性取整或者取浮点。</span>
				if(arguments.length==2){
					if(obj.currentStyle){
						return obj.currentStyle[attr];
					}
					else{
						return getComputedStyle(obj,false)[attr];
					}
				}
				else if(arguments.length==3){
					obj.style[attr]=value;
				}
			}
		</script>
	</head>
	<body>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
	</body>
</html>