js完美运动框架

程序员文章站 2022-03-27 13:13:38

...

创建Move.js运动框架

function getStyle(obj,name){
				if (obj.currentStyle) {
					return obj.currentStyle[name];//ie
				} else{
					return getComputedStyle(obj,false)[name];//ff
				}
			}
			
			//任意值的运动框架
			var timer=null;
			function startMove(obj,json,fnEnd){
				//停止上一次计数器，解决同个对象同事调用多个startMove时定时器叠加问题；
				clearInterval(obj.timer);
				obj.timer=setInterval(function(){
					//判断同时运动
					var bStop=true;//假设值都到了
					
					for (var attr in json) {
						//取当前值，用于存储attr的属性值
						var cur =0;
					
					if(attr=='opacity'){
						cur=Math.round(parseFloat(getStyle(obj,attr))*100);//ie
					}else{
						cur=parseInt(getStyle(obj,attr));//ff
					}
					
					//计算速度
					var speed=(json[attr]-cur)/6;
					speed=speed>0?Math.ceil(speed):Math.floor(speed);//取整，解决浏览器忽略小于1px导致运动结束时离目标值少几个px的距离
					
					//判断是否同时到达
						if (cur!=json[attr]) {
							bStop=false;
						} 
							if(attr=='opacity'){
								obj.style.filter='alpha(opcity:'+(cur+speed)+')';
								obj.style.opacity=(cur+speed)/100;
							}else{
								obj.style[attr]=cur+speed+"px";
							}
					}
					
					if(bStop){
						clearInterval(obj.timer);
						if(fnEnd)fnEnd();
					}
				},30);
			}

在html页面应用框架进行运动

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#div1{width: 100px;height: 100px;background: red;opacity: 0.3;
				filter: alpha(opacity:30); }
		</style>
		<script type="text/javascript" src="js/Move.js" ></script>
		<script>
			window.onload=function(){
				var btn=document.getElementById('btn');
				var div1=document.getElementById('div1');
				
				btn.onclick=function(){
					startMove(div1,{width:101,height:300,opacity:100});//输入你想要div进行运动的属性
				}
			}
		</script>
	</head>
	<body>
		<input type="button" id="btn" value="运动" />
		<div id="div1"></div>
	</body>
</html>

js完美运动框架

基于ASP.NET+EasyUI框架实现图片上传提交表单功能(js提交图片)

js实现完美拖拽效果可拖动层与回放拖动规迹并显示拖动距离参数

php ci框架中加载css和js文件失败的解决方法

Laravel框架基于ajax和layer.js实现无刷新删除功能示例

浅谈Node.js轻量级Web框架Express4.x使用指南

EpiiAdmin 开源的php交互性管理后台框架, 让复杂的交互变得更简单！Phper快速搭建交互性平台的开发框架,基于Thinkphp5.1+Adminlte3.0+Require.js。

运动拍档-中国移动智能运动手表W10让你轻装简行也完美

js是什么编程语言（java开发常用四大框架）

python flask框架实现传数据到js的方法分析

js框架之Vue框架简介