原生js之运动函数的封装

//运动函数
function startMove(obj,json,callback){ //{width:3,height:300}clearInterval( obj.timer );obj.timer = setInterval( function(){var flag = true;//假设值为true时 可以停止定时器for( var attr in json ){var current = 0;if( attr == "opacity" ){current = getStyle(obj,attr) * 100 ;}else if( attr == "zIndex" ){current = parseInt( getStyle(obj,attr) ) ;}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] ){//动作没有完成 flag 就要变成falseflag = false;}//继续设置样式if( attr == "opacity" ){obj.style[attr] = (current + speed)/100;}else if( attr == "zIndex" ){obj.style[attr] = json[attr];}else{obj.style[attr] = current + speed + "px";}}//如果循环结束后 flag的值还是true 假设成立 可以停止定时器了if( flag ){ //动作完成的条件clearInterval( obj.timer );//下一个动作功能不确定 所以通过一个参数传递 这个参数表示函数//上一个动作完成后进入到下一个动作if( callback ){callback();}}} , 30 )
}
//获取css样式值
function getStyle(obj,attr){if( window.getComputedStyle ){return window.getComputedStyle(obj,false)[attr];}else{return obj.currentStyle[attr];}
}

原生js之运动函数的封装相关推荐

原生js实现动态表格分页(封装版)
之前一直用的插件做表格分页,但是不同的场景用到的情况都不同,所以索性用个原生js搞一个封装好的. 后台动态获取数据进行渲染,等页面渲染成功之后在进行分页.数据的获取我用的vue,也可以用ajax等其他 ...
js浮动运动函数html,JS+CSS动态绘制元素曲线运动轨迹(数学函数)
相信许多小伙伴都想知道CSS+JS如何实现物体的曲线运动吧! 其实原理就是运用数学用的函数公式,本文运用的是sin函数上进行的基础变形. 今天的主要目标就是让这张图的里足球运动起来. 首先肯定要先把这 ...
原生js的图片.文字.小框的跑马灯效果及弹幕效果
笔者在最近的一个点上项目中使用原生js遇到一个跑马灯效果,需要图片循环播放,可以根据图片的多少改变一定的样式,从而实现跑马灯效果.于是把图片的,文字的和另一种小框的都整合了一下,顺便基于小框的跑马灯增 ...
原生JS实现——flappy bird 像素小鸟项目总结
项目展示项目准备 images中所用到的图片 index.html 用一个 div 来包裹游戏内容区域 <div id="game"><!-- 小鸟div - ...
原生js之fetch
fetch是一种HTTP数据请求的方式.fetch不是ajax的进一步封装,是原生js.Fetch函数就是原生js,没有使用XMLHttpRequest对象,是一个全局方法. fetch 规范与 jQ ...
原生JS封装时间运动函数
/*讲时间运动之前先给大家复习一下运动函数通常大家都会写运动框架,一个定时器(Timer),一个步长(step 就是每次运动的距离),一个当前位置(current)一个目标位置(target),然后 ...
animate用法 js原生_原生JS封装animate运动框架的实例
如下所示: div { width: 100px; height: 100px; background-color: pink; position: absolute; left: 0; top: 5 ...
原生JS基于window.scrollTo()封装垂直滚动动画工具函数
概要: 原生JS基于window.scrollTo()封装垂直滚动动画工具函数,可应用与锚点定位.回到顶部等操作. ####封装原因: 在vue项目中,遇到需要实现垂直滚动效果的需求,初步想到的方法有 ...
原生JS基础实现萤火虫效果【附源码及封装函数】
上代码之前,先看一下效果: CSS部分(此处用元素模拟萤火虫,背景可自行设置): <style>.box{width: 4px;height: 5px;background: wheat; ...

原生js之运动函数的封装

原生js之运动函数的封装相关推荐

最新文章

热门文章