原生js封装元素运动函数

首先看看演示效果

代码, 函数参数obj为当前想要变动的元素, changeData为想要变动的种类, 例如, func为元素动作结束后想要处理的函数

例如向上面那个演示, 注意: opacity要乘以100, 原因见如下代码

var div = document.getElementsByClassName('demo')[0];startMove(div, {width:200 ,  height:200, left:100, top:100, opacity: 50}, function(){});

/*
* 运动函数模型*/function startMove(obj, changeData, func) {clearInterval(obj.timer);var iCurValue = 0;var iSpeed = 0;var bStop;obj.timer = window.setInterval(function () {bStop = true;//判断当前所有动作是否全部执行完毕for(var name in changeData) {console.log(name, changeData[name]);if(name === 'opacity') {//对透明度进行处理时注意要扩大倍数, 否则容易造成bugiCurValue = parseFloat(getStyle(obj, name)) * 100;}else {iCurValue = parseInt(getStyle(obj, name));}iSpeed = (changeData[name] - iCurValue) / 7;//缓冲运动效果if(iSpeed > 0) {iSpeed = Math.ceil(iSpeed);}else{iSpeed = Math.floor(iSpeed);}if(name === 'opacity') {obj.style.opacity = (iCurValue + iSpeed) / 100;         }else{obj.style[name] = iCurValue + iSpeed + 'px';}if(iCurValue !== changeData[name]) {bStop = false;}}if(bStop) {//整个动作执行完毕clearInterval(obj.timer);func();//当全部动作执行完毕之后, 执行回调函数.}}, 30);
}

原生js封装元素运动函数相关推荐

原生JS封装时间运动函数
/*讲时间运动之前先给大家复习一下运动函数通常大家都会写运动框架,一个定时器(Timer),一个步长(step 就是每次运动的距离),一个当前位置(current)一个目标位置(target),然后 ...
animate用法 js原生_原生JS封装animate运动框架的实例
如下所示: div { width: 100px; height: 100px; background-color: pink; position: absolute; left: 0; top: 5 ...
原生html中modal,基于原生JS封装的Modal对话框插件
基于原生JS封装Modal对话框插件原生JS封装Modal对话框插件,个人用来学习原理与思想,只有简单的基本框架的实现,可在此基础上添加更多配置项 API配置 //基本语法 let modal = ...
原生JS封装Ajax插件(同域jsonp跨域)
2019独角兽企业重金招聘Python工程师标准>>> 抛出一个问题,其实所谓的熟悉原生JS,怎样的程度才是熟悉呢? 最近都在做原生JS熟悉的练习... 用原生Js封装了一个Ajax ...
原生Js封装的弹出框-弹出窗口-页面居中-多状态可选
实现了一下功能: 1.title可自定义可拖拽 2.width height可以自定义 3.背景遮罩和透明度可以自定义 4.可以自己编辑弹出框里的html 5.确定取消按钮可选调用方法: 1 P ...
原生JS封装ajax方法
http://blog.sucaijiayuan.com/article/89 jquery框架的ajax方法固然好用,但是假如某天我们的项目不能引入jquery或项目需求很简单,没有很多交互功能,只 ...
js原生后代选择器_JavaScript DOM查询，原生js实现元素子节点的获取
每个网页都是一个dom树,网页中所有的内容都是这个树上的一个节点.JavaScript的工作就是操作这些节点,对节点进行查增删改操作,或是给节点绑定事件. 网页 dom树要操作dom节点,首先要获取 ...
原生js封装table组件
使用原生js封装自己的table组件. 思路是通过设置参数,生成对应的表格dom; 源码如下:(初步实现) var XUi = {// table组件tableDom:{common:function ...
js 封装ajax方法吗,原生JS封装ajax方法
jquery框架的ajax方法固然好用,但是假如某天我们的项目不能引入jquery或项目需求很简单,没有很多交互功能,只需要ajax,这时引入jquery库会造成资源浪费,也会显得页面臃肿.这时我们就 ...

原生js封装元素运动函数

代码, 函数参数obj为当前想要变动的元素, changeData为想要变动的种类, 例如, func为元素动作结束后想要处理的函数

原生js封装元素运动函数相关推荐

最新文章

热门文章