JS运动中级

时间:2020-05-30
本文章向大家介绍JS运动中级，主要包括JS运动中级使用实例、应用技巧、基本知识点总结和需要注意事项，具有一定的参考价值，需要的朋友可以参考一下。

JS运动中级

链式运动框架

回调函数

运动停止时，执行函数

运动停止时，开始下一次运动

实际上就是在原先的move运动框架中添加了一个参数fnEnd，这个参数是一个函数，父函数的运动执行完后再执行fnEnd中的运动，形成了链式运动。

例子：土豆右下角菜单

​ 这里只附上了js代码，详细的css样式代码和html代码可进入以下链接下载课件

​ 传送门：https://study.163.com/course/courseLearn.htm?courseId=224014#/learn/video?lessonId=368103&courseId=224014

window.onload=function ()
{
	var oBtnShow=document.getElementById('but');
	var oBtnClose=document.getElementById('btn_close');
	var oBottom=document.getElementById('zns_bottom');
	var oBox=document.getElementById('zns_box');
	
	oBtnShow.onclick=function(){
		startMove(oBottom,'right',0,function(){		//点击后先将右下角按钮的zns_bottom显示出来
			oBox.style.display='block';			//再将zns_box显示出来
			startMove(oBox,'bottom',0);
		});
	};
	
	oBtnClose.onclick=function(){
		startMove(oBox,'bottom',-315,function(){
			oBox.style.display='none';
			startMove(oBottom,'right',-165);
		});
	}
};

完美运动框架

多个值同时变化

setStyle同时设置多个属性

参数传递

  • Json的使用
  • for in 遍历循环

运用到运动框架

检测运动停止（标志变量）

//获取非行间样式--(详见深入了解深入了解JavaScript)
		function getStyle(obj,name)
		{
			if(obj.currentStyle)
			{
				return obj.currentStyle[name];
			}
			else
			{
				return getComputedStyle(obj,null)[name];
			}
		};
		//完美多值运动框架 参数(物体，json{改变样式：目标值}，停止调用函数)
		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));	//物体当前透明度值,round四舍五入保留整数部分
					}
					else
					{
						cur=parseInt(getStyle(obj,attr));		//物体当前的样式值
					}
					
					var speed=(json[attr]-cur)/6;
					speed=speed>0?Math.ceil(speed):Math.floor(speed);
					
					//如果有样式未达到目标值，则将bStop置false
					if(cur!=json[attr])
						bStop=false;
						
					//如果修改样式为透明度opacity,则作单独处理
					if(attr=='opacity')
					{
						obj.style.filter='alpha(opacity:'+(cur+speed)+')';	//IE
						obj.style.opacity=(cur+speed)/100;				//Chrome,FF
					}
					else
					{
						obj.style[attr]=cur+speed+'px';
					}
				}
				if(bStop)
				{
					clearInterval(obj.timer);
					if(fnEnd)	fnEnd();
				}
			},30);
		};

以上就是完美运动框架的JS代码

运动框架总结

运动框架演变过程

  • startMove(iTarget) 运动框架
  • startMove(obj,iTarget) 多物体
  • startMove(obj,attr,iTarget) 任意值
  • startMove(obj,attr,iTarget,fn) 链式运动——阶段性运动
  • startMove(obj,json) 多值运动
  • startMove(obj,json,fn) 完美框架运动

运动框架运用

运动框架应用

例子：幻灯片

window.onload=function ()
{
	var oDiv=document.getElementById('play');
	var aBtn=oDiv.getElementsByTagName('ol')[0].getElementsByTagName('li');
	var oUl=oDiv.getElementsByTagName('ul')[0];
	
	var now=0;
	
	for(var i=0;i<aBtn.length;i++)
	{
		aBtn[i].index=i;
		aBtn[i].onclick=function()
		{
			now=this.index;
			tab();
		};
	}
	//封装：小按钮点击样式改变，且图片转换
	function tab()
	{
		//点击小按钮,先让所有小按钮都失去class
		for(var i=0;i<aBtn.length;i++)
		{
			aBtn[i].className='';
		}
		aBtn[now].className='active';
		startMove(oUl,{top: -150*now});
	}
	//封装：如果图片为最后一张，下一张图片移到第一张
	function next()
	{
		now++
		if(now==aBtn.length)
		{
			now=0
		}
		tab();
	}
	
	//定时器实现图片自动播放
	var timer=setInterval(next,2000);
	
	//鼠标移入暂停,移出继续
	oDiv.onmouseover=function()
	{
		clearInterval(timer);
	}
	oDiv.onmouseout=function()
	{
		var timer=setInterval(next,2000);
	}
};

例子：新浪微博链式运动

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>微博效果</title>
		<style>
			*{margin: 0;padding: 0;}
			#ul1{width: 400px;height: 400px;border: 1px solid #000000;margin: 10px auto;overflow: hidden;}
			#ul1 li{border-bottom: 1px #999999 dashed;padding: 5px;list-style: none;opacity: 0;filter: alpha(opacity:0);}
		</style>
		<script src="js/move_new.js"></script>
		<script>
			window.onload=function(){
				var oBtn=document.getElementById('btn1');
				var oUl=document.getElementById('ul1');
				var oTxt=document.getElementById('txt1');
				
				oBtn.onclick=function(){
					var oLi=document.createElement('li');
					oLi.innerHTML=oTxt.value;
					oTxt.value='';
					//防止出Bug,ul空则appendChild,非空则直接往里插
					if(oUl.children.length>0)
					{
						oUl.insertBefore(oLi,oUl.children[0]);
					}
					else
					{
						oUl.appendChild(oLi);
					}
					//运动
					var iHeight=oLi.offsetHeight;
					
					oLi.style.height='0';
					startMove(oLi,{height:iHeight},function(){
						startMove(oLi,{opacity:100});
					});
				}
			}
		</script>
	</head>
	<body>
		<textarea id="txt1" rows="4" cols="40"></textarea>
		<input type="button" id="btn1" value="发布" />
		<ul id="ul1">
			<li>微博</li>
		</ul>
	</body>
</html>

原文地址：https://www.cnblogs.com/potatolulu/p/12994019.html

随机文章
Javascript知识点必读
最近更新