Js运动框架

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
<div id="div1" style="width: 100px;height: 100px;background: red;position: absolute;top:0;left: 0;"></div>
</body>
<script type="text/javascript">
	function animate(ele,attr,value){
		var speed;
		var timer=null;
		(function(){
			clearInterval(timer);
			timer=setInterval(function(){
				var now=parseInt(ele.style[attr]);
				speed=(value-now)/10;
				speed=speed>0?Math.ceil(speed):Math.floor(speed);
				if(now!=value){
					ele.style[attr]=now+speed+'px';
				}else{
					clearInterval(timer);
				}
			},30);
		})();
		
	}
	var div = document.getElementById("div1");
	animate(div,'top',200);
	animate(div,'left',100);
</script>
</html>

==============================更新一下==============================

上面那个还是太挫了,看下面这个: 

var getStyle = function(obj,attr){
		if(obj.style[attr]){
			/*内联样式*/
			return obj.style[attr];
		}else if(obj.currentStyle){
			/*IE*/
			return obj.currentStyle[attr];
		}else if(document.defaultView.getComputedStyle(obj)){
			/*W3C*/
			return document.defaultView.getComputedStyle(obj)[attr];
		}else{
			return null;
		}
	}

var startMove=function(obj,json,fn){
		clearInterval(obj.timer);
		obj.timer = setInterval(function(){
			var stop = true;//停止变量
			for(var attr in json){
				/*计算属性当前值*/
				var current = 0;
				if(attr == 'opacity'){
					current = parseInt(parseFloat(getstyle(obj,attr))*100);
				}else{
					current = parseInt(getstyle(obj,attr));
				}
				/*计算速度*/
				var speed = (json[attr]-current)/10;
				speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
				/*判断是否停止*/
				if(current != json[attr]){
					stop = false;
				}
				/*改变属性值*/
				if(attr == 'opacity'){
					obj.style.filter = 'alpha(opacity:'+(current+speed)+')';
					obj.style.opacity = (current+speed)/100;
				}else{
					obj.style[attr] = current+speed+'px';

				}
			}
			/*结束停止定时器*/
			if( stop ) {
				clearInterval( obj.timer );
				if(fn){
					fn();
				}
			}
		},100);
	}

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • JS字符串补全方法padStart()和padEnd()

    用户1749219
  • 史上最“脑残”的“抢火车票”程序(node.js版)

    用户1749219
  • 简单轮播图实现

    用户1749219
  • JS-完美运动框架(封装)

    xing.org1^
  • 定时器

    var timer=setInterval(函数,毫秒); 重复执行 clearInterval(timer); 清空定时器

    河湾欢儿
  • 干货|云原生计算基金会之云原生全景图

    云是和本地相对的,传统的应用必须跑在本地服务器上,现在流行的应用都跑在云端,云包含了IaaS、PaaS和SaaS。

    猿哥
  • Java并发指南13:Java 中的 HashMap 和 ConcurrentHashMap 全解析

    本文是微信公众号【Java技术江湖】的《Java并发指南》其中一篇,本文大部分内容来源于网络,为了把本文主题讲得清晰透彻,也整合了很多我认为不错的技术博客内容,...

    Java技术江湖
  • 面试再问HashMap,求你把这篇文章发给他!

    总所周知 HashMap 是面试中经常问到的一个知识点,也是判断一个候选人基础是否扎实的标准之一,因为通过 HashMap 可以引出很多知识点,比如数据结构(数...

    Java技术栈
  • JavaScript 103 条技能

    1、原生JavaScript实现字符串长度截取 function cutstr(str, len) { var temp; var ic...

    琯琯
  • 献给前端求职路上的你们(下)

    真正面试中,面试官往往采用的是由难到易的套路,那js和jQuery就是重中之重了,以及针对项目和所用技术方面的一些问题也就是你的必备储粮啦! JavaScrip...

    用户1667431

扫码关注云+社区

领取腾讯云代金券