一个原生的类似jquery的JS动画插件

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

汉王

HTML代码

复制格式化注释注释清空

放大

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>类似jquery的JS动画插件</title>
		<style type="text/css">
			#test{
				position:absolute;
				width:100px;
				height:100px;
				left:100px;
				top:100px;
				background-color:#99F;	
			}
		</style>
		<script type="text/javascript">
			/*
			 * ALAnime Util 模块
			 * 该模块提供基础方法,请优先加载该模块
			 */
			(function(win, Anime){
				var rgb = /rgb$(\d+), ?(\d+), ?(\d+)$/i,
					hex = /^#([0-9a-fA-F]{6})$/i,
					shex = /^#([0-9a-fA-F]{3})$/i,
					merge = /^#([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/i;
				
				var haspx = /px$/i,
					pxval = /\d+/i,
					iscolor = /(?:rgb)|#/i;
					
				/*
				 * ALAnime 主配置参数
				 * 请不要直接更改这个属性,若要更改,请调用Setting函数
				 */
				Anime._prop = {
					interval : 1	// ALAnime在调用setTimeout时所指定的时间间隔
				};
				
				/*
				 * ALAnime 主配置更改函数 (public function)
				 * 若指定参数,那么将设置更改主配置,否则取得主配置
				 */
				Anime.setting = function(option){
					if(option){
						for(var prop in option){
							Anime._prop[prop] = option[prop];
						}
					}else{
						return Anime._prop;
					}
				};
				
				/*
				 * 转换一个CSS的值 (private function)
				 * 若为 33px 则去掉px
				 * 若为颜色 则转换成整数
				 */
				var parseCss = function(css){
					if(haspx.test(css)){
						return parseInt(css.match(pxval))	
					}else if(iscolor.test(css)){
						return Anime._convertColorToInt(css);
					}else{
						return css;
					}
				};
				
				/*
				 * 转换目标样式的值 (private function)
				 * 若为 33px 则去掉px
				 * 若为颜色 则转换成整数
				 */
				Anime._parseTargetStyle = function(targetstyle){
					for(var i in targetstyle){
						targetstyle[i] = parseCss(targetstyle[i]);
					}
					
					return targetstyle;
				}
				
				/*
				 * 取得元素实际样式 (private function)
				 * element 要取得样式的元素
				 * css 要取得的样式,驼峰写法
				 * 若省略css参数则返回整体style,否则返回特定,并且去掉所有带有px的px
				 * 若css为string那么取得特定的样式
				 * 若css为object那么取得所有object key所对应的对象
				 */
				Anime._getStyle = function(element, css){
					var style = element.currentStyle
						|| win.document.defaultView.getComputedStyle(element, null);
						
					if(!css){	// 取得总体样式
						return style;
						
					}else{
						if(typeof(css) == "string"){	// 取得特定的样式, 并且若样式结尾带px则去掉px,转换颜色
							return parseCss(style[css]);
							
						}else if(typeof(css) == "object"){	// 取得样式集合, 并且若样式结尾带px则去掉px,转换颜色
							var rval = {};
							for(var i in css){
								rval[i] = parseCss(style[i]);
							}
							
							return rval;
						}
					}
				};
				
				/*
				 * 将一个颜色字符串转换为INT类型的颜色 (private function)
				 * color 颜色字符串
				 */
				Anime._convertColorToInt = function(color){
					var matcher = null,
						r,
						g,
						b;
					
					if(rgb.test(color)){	// 处理rgb颜色
						matcher = rgb.exec(color);
						r = parseInt(matcher[1], 10) << 16;
						g = parseInt(matcher[2], 10) << 8;
						b = parseInt(matcher[3], 10);
						return r | g | b;
						
					}else if(hex.test(color)){
						matcher = hex.exec(color);
						return parseInt(matcher[1], 16);
						
					}else if(shex.test(color)){						
						return parseInt(color.replace(merge, "$1$1$2$2$3$3"), 16);
						
					}else{
						return undefined;	
						
					}
				};
				
				/*
				 * 将一个整数转换为#ffffff形式的color (private function)
				 * color 颜色整数
				 */
				Anime._convertIntToColor = function(color){
					var r,
						g,
						b;
					
					if(typeof(color) == "number"){
						r = (color >> 16) & 255;
						g = (color >> 8) & 255;
						b = color & 255;
						
						r = r < 10 ? r.toString(16) + r.toString(16) : r.toString(16);
						g = g < 10 ? g.toString(16) + g.toString(16) : g.toString(16);
						b = b < 10 ? b.toString(16) + b.toString(16) : b.toString(16);
						
						return "#" + r + g + b;
					}else{
						return undefined;	
					}
				};
				
				
				// 转交控制权
				win.ALAnime = Anime;
			}(window, window.ALAnime || {}));
			
			
			
			
			
			/*
			 * ALAnime Anime 模块
			 * 该模块提供ALAnime的动画
			 */
			(function(win, Anime){
				var animeList = [],			// 动画队列
					animeTimeout;			// 动画播放计时器
				
				/*
				 * 在播放动画前计算 (private function)
				 * 这个方法将在播放前计算播放函数所需的所有参数
				 * 返回的对象如下
				 * {
				 *    element      播放动画的元素
				 *    srcStyle     原始的Style条目
				 *    tarStyle     目标Style条目
				 *    stepStyle    播放Style中各个条目一单位所需要的毫秒列表
				 *    startTime    动画开始播放时间
				 *    lastTime     最后播放时间
				 *    passedTime   动画已经播放了多少毫秒
				 *    animeTime    动画预定在多少毫秒内播放完毕
				 *    isNextStop   动画是否在下次播放时候立即停止,被停止的动画将被移出动画队列 stop
				 *    isNextFinish 动画是否在下次播放时候立即完成,被完成的动画将被移除动画队列 stop(true)
				 * }
				 */
				var _beforeAnime = function(element, styles, keeptime){
					var timenow = new Date();
					
					var rval = {};
					rval.element = element;
					rval.animeTime = keeptime;
					
					// 计算原始style
					rval.srcStyle = Anime._getStyle(element, styles);
					rval.tarStyle = Anime._parseTargetStyle(styles);
					
					// 计算stepStyle
					var steps = {};
					for(var i in rval.srcStyle){
						steps[i] = (rval.tarStyle[i] - rval.srcStyle[i]) / keeptime;
					}
					rval.stepStyle = steps;
					
					
					isNextStop = 0;
					isNextFinish = 0;
					
					rval.startTime = timenow;
					rval.lastTime = timenow;
					rval.passedTime = 0;
					
					return rval;
				};
				
				
				/*
				 * 设置快速完成 (private function)
				 * animeobj 播放动画对象也就是animeList[i]中的对象
				 */
				var _setfinish = function(animeobj){
					var tarstyle = animeobj.tarStyle;
					var element = animeobj.element;
					
					for(var i in tarstyle){
						switch(i){
							case "width":
							case "height":
							case "left":
							case "top":
								element.style[i] = tarstyle[i] + "px";
								break;
							
							case "color":
							case "backgroundColor":
								element.style[i] = Anime._convertIntToColor(tarstyle[i]);
								break;	
						}
					}
					
				};
				
				/*
				 * 实际播放动画函数 (private function)
				 * animeobj 播放动画对象也就是animeList[i]中的对
				 */
				var _showanime = function(animeobj){
					var passedtime = animeobj.passedTime;
					var stepstyle = animeobj.stepStyle;
					var element = animeobj.element;
					var srcstyle = animeobj.srcStyle;
					
					for(var i in stepstyle){
						switch(i){
							case "width":
							case "height":
							case "left":
							case "top":
								element.style[i] = parseInt(srcstyle[i] + passedtime * stepstyle[i]) + "px"
								break;
							
							case "color":
							case "backgroundColor":
								element.style[i] = Anime._convertIntToColor(parseInt(srcstyle[i] + passedtime * stepstyle[i]));
								break;	
						}
					}
						
				};
				
				/*
				 * 实际播放动画函数 (private function)
				 */
				var _anime = function anime(){					
					var timenow = new Date();
					
					clearTimeout(animeTimeout);
					animeTimeout = setTimeout(function(){
						
						for(var i=0; i<animeList.length; i+=1){
							// 否则判断是否应该停止
							if(animeList[i].isNextStop){	// 如果设置了停止标示,那么直接从队列中移除这个动画
								//console.debug(animeList[i] + " 立即停止");
								
								if(animeList[i].isNextFinish){	// 如果设置了快速完成标示那么快速完成,并且从队列中移除
									//console.debug(animeList[i] + " 快速完成");
									_setfinish(animeList[i]);	// 完成播放动画
								}
								
								animeList.splice(i,1);	
								i -= 1;
							}else{	// 正常播放动画
								animeList[i].passedTime += timenow - animeList[i].lastTime;
								
								
								if(animeList[i].passedTime >= animeList[i].animeTime){	// 将播放完成的动画切换到完成状态,并且从队列中移除
									//console.debug(animeList[i] + " 播放完成 用时 " + animeList[i].passedTime);
									
									_setfinish(animeList[i]);	// 完成播放动画
									
									// 快速切换至播放完毕
									animeList.splice(i,1);	
									i -= 1;
								}else{
									_showanime(animeList[i]);
									
									animeList[i].lastTime = timenow;
									//console.debug(animeList[i]);
									//console.debug(animeList[i] + " 正在播放 用时 " + animeList[i].passedTime);
								}
								
							}
						
						}
						
						// 如果动画队列还有未播放的动画,那么再次播放动画
						if(animeList.length > 0){
							anime.call(win);	
						}
					}, Anime.setting().interval);
				};
				
				
				/*
				 * 播放动画函数 (public function)
				 * element 要播放动画的对象
				 * styles 预到达的效果
				 * keeptime 在多少毫秒达到此效果 等价于 animeTime
				 * 这个方法会调用_beforeAnime方法用于生成播放动画所需对象
				 * 然后调用内部_anime播放动画
				 */
				Anime.anime = function(element, styles, keeptime){
					animeList.push(_beforeAnime(element, styles, keeptime));
					_anime.call(win);
					
					return Anime;
				};
				
				/*
				 * 停止指定动画
				 * element 欲停止动画的元素
				 * quickfinish 是否快速切换到完成状态
				 */
				Anime.stop = function(element, quickfinish){
					for(var i=0; i<animeList.length; i+=1){
						if(animeList[i].element == element){
							animeList[i].isNextStop = true;
							if(quickfinish === true){
								animeList[i].isNextFinish = true;
							}
						}
					}
					
					return Anime;
				};
				
				/*
				 * 停止所有动画
				 * quickfinish 是否快速切换到完成状态
				 */
				Anime.stopall = function(quickfinish){
					for(var i=0; i<animeList.length; i+=1){
						animeList[i].isNextStop = true;
						if(quickfinish === true){
							animeList[i].isNextFinish = true;
						}
					}
					
					return Anime;	
				};
				// 转交控制权
				win.ALAnime = Anime;
			}(window, window.ALAnime || {}));
			// 测试代码
			window.onload = function(){
				document.getElementById("btntest").onclick = function(event){
					//alert(ALAnime._convertColorToInt("#f0f"));
					//alert(parseInt("ff00ff", 16));
					//alert(ALAnime._convertIntToColor(43143214));
					//alert(ALAnime._getStyle(this, "left"));
					ALAnime.anime(document.getElementById("test"), {left : 300, top : 300, width : 500, backgroundColor : "#ff00ff"}, 1000);
					//ALAnime.stop(document.getElementById("test"), true);
					//ALAnime.stopall(true);
				};
			};
			
		</script>
	</head>
	
	<body>
		<input id="btntest" type="button" value="test" />
		<div id="test"></div>
	</body>
</html>

CSS代码

复制格式化注释注释颜色清空

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

一个原生的类似jquery的JS动画插件

分类

jQuery实例

描述

一个原生的类似jquery的JS动画插件，一个原生JS写的类似JQuery动画的插件,目前只支持移动和大小调整以及颜色渐变，个人感觉非常垃圾，仅供参考学习。