js运动函数

function doMove ( obj, attr, dir, target, callback ) {

	dir = parseInt(getStyle( obj, attr )) < target ? dir : -dir;

	clearInterval( obj.timer );

	obj.timer = setInterval(function () {

		var speed = parseInt(getStyle( obj, attr )) + dir;			// 步长

		if ( speed > target && dir > 0 ||  speed < target && dir < 0  ) {
			speed = target;
		}

		obj.style[attr] = speed + ‘px‘;

		if ( speed == target ) {
			clearInterval( obj.timer );

			callback && callback();

		}

	}, 30);
}

function getStyle ( obj, attr ) { return obj.currentStyle?obj.currentStyle[attr] : getComputedStyle( obj )[attr]; }

  

时间: 2024-10-27 12:26:31

js运动函数的相关文章

JS运动中的封装的部分实用函数(框架)总结

JS运动中的封装的部分实用函数(框架)总结 前段时间学习JS运动时做的很实用的几个函数,应该可以称之为小的框架了,现在总结一下.为什么不当时就总结呢?我认为所谓总结不是趁着大脑中还残留着对新知识印象的时候将其写下来,而是过了一段时间之后再回头去看,将其重新拾起,这个时候一般会有对这些新东西的新看法和新的体会,我把这个过程称为"知识的发酵".对于我来说经过 "发酵"之后的带有自己的见解和体会东西才可以称之为总结. 下面分为几个版本来说,也反映了他们的进化过程,这几个函

JS里面的两种运动函数

最新学了一个新的运动函数,与最初学习的有所不同,第一个运动是根据运动速度完成运动 ,第二个则是根据运动的时间来完成运动,而且把之前的函数都进行了一些兼容处理,在这里列出了看一下: 第一种animate1 1 function animate1(obj,data,rate,fn){//运动对象,运动数据,[运动速度],[回调函数] 2 //遍历获取样式属性 3 for(var key in data){ 4 //通过闭包将key私有化 5 (function(k){ 6 /* 7 获得样式宽高等会

JS运动缓冲的封装函数

之前经常写运动函数,要写好多好多,后来想办法封装起来.(运动缓冲). 1 /* 2 物体多属性同时运动的函数 3 obj:运动的物体 4 oTarget:对象,属性名为运动的样式名,属性值为样式运动的终点值 5 ratio:速度的系数 6 */ 7 function bufferMove(obj, oTarget, fn,ratio = 8) { 8 clearInterval(obj.iTimer); 9 obj.iTimer = setInterval(function () { 10 //

JS运动从入门到兴奋1

hello,我是沐晴,一个充满了才华,却靠了照骗走江湖的前端妹子.在这个充满PS的年代,这你们都信,哈哈,废话不多说,今天要分享的是关注JS运动的知识.楼主一直认为,不管学习什么,核心思想才是王道,掌握了思想,不管需求怎么改变,我们都能把它玩弄于股掌之中...下面我们就由浅入深走进运动的世界吧. 首先来看最基础的运动:单个物体向右匀速运动到某一点停止      例子:一个按钮,一个div,点击按钮,让div向右运动到某一个位置暂停 // 原理: 1 获取物体当前的位置 oDiv.offsetle

JS运动1 (转)

JS运动从入门到兴奋1 http://www.cnblogs.com/moqing/p/5666476.html hello,我是沐晴,一个充满了才华,却靠了照骗走江湖的前端妹子.在这个充满PS的年代,这你们都信,哈哈,废话不多说,今天要分享的是关注JS运动 的知识.楼主一直认为,不管学习什么,核心思想才是王道,掌握了思想,不管需求怎么改变,我们都能把它玩弄于股掌之中...下面我们就进入运动的世界吧. 首先来看最基础的运动:单个物体向右匀速运动到某一点停止      例子:一个按钮,一个div,

JS运动从入门到精髓!哈哈

首先来看最基础的运动:单个物体向右匀速运动到某一点停止      例子:一个按钮,一个div,点击按钮,让div向右运动到某一个位置暂停 // 原理: 1 获取物体当前的位置 oDiv.offsetleft // 2 利用定时器,每隔一定的时间,让物体位置增加相同的距离(10px). // 3 判断物体是否移动到指定位置(500px),如果到达,就清除定时器 var oBtn = document.getElementById('btn'); var oDiv = document.getEle

js运动动画

今天简单的学了一下js运动动画,再此感谢慕课网的这位老师http://www.imooc.com/view/167,讲的很不错. 下面是我整理出来的结果. 知识点一:速度动画. 1.首先第一步实现速度运动动画,封装一个函数,用到的知识是setInterval(function(){ oDiv.style.left=oDiv.offsetLeft+10+"px"; },30). 对于这里为什么要用到offsetLeft,我特意百度了一下,http://www.cnblogs.com/wo

js运动框架逐渐递进版

运动,其实就是在一段时间内改变left.right.width.height.opactiy的值,到达目的地之后停止. 现在按照以下步骤来进行我们的运动框架的封装: 匀速运动. 缓冲运动. 多物体运动. 任意值变化. 链式运动. 同时运动 (第一部分):匀速运动 运动基础 思考:如何让div动起来?如下: 设置元素为绝对定位,只有绝对定位后,left,top等值才生效. 定时器的使用(动态改变值),这里使用setInterval()每隔指定的时间执行代码. 计时器setInterval(函数,交

js运动-同时运动

接着上一篇 <js运动-链式运动>继续折腾 上一篇中我们的运动框架,可以完美的实现让一个物体先变宽,在变高,在变透明度.....,看似很完美了! 貌似可以喝喝茶看看美女了.但是老板突然说,让你同时改变一个物体的宽高和透明度,心碎了一地!!! 拿过之前的运动框架发现,无法实现让div同时又变宽,又变高,有变透明度!!最后无能为力,只好有请JSON大神出场了,不认识json的小伙伴们就找度娘问一下吧! function startMove(obj,attr,iTarget,fn) 之前的start